/* =========================================================
   Clémentine Gicquiaud — Direction artistique
   Page d'accueil (maquette p.1)
   ========================================================= */

/* ---------- 1. Réglages globaux ---------- */

:root {
  /* Couleurs relevées sur la maquette */
  --c-page:        #ffffff;
  --c-ink:         #101010;
  --c-ink-soft:    #4a4a4a;

  /* Le gris des deux lignes qui suivent le titre de l'accueil, relevé sur la
     maquette NEW : c'est aussi celui des liens inactifs du bandeau. Le pied de
     page, plus sombre encore, en a un second, un cran plus bas. */
  --c-gris-nuit:   #868686;
  --c-gris-pied:   #686868;

  /* Grille : 9 colonnes de carrés, marges et gouttières fluides.
     Valeurs relevées sur la maquette V2 (1920 × 1080). */
  --cols:    9;
  --pad:     clamp(18px, 2.25vw,   43px);   /* 36px @1600 */

  /* Hauteur du header, reconstituée à partir des valeurs qui la produisent :
     ses deux retraits et la ligne de texte. 50,5px @1600 — vérifié. Le header
     étant fixe, elle sert à décaler les ancres, qui viendraient sinon se
     glisser dessous. Sur petit écran il s'empile sur deux lignes : la valeur
     est reprise plus bas, dans la bascule à 1023px. */
  --header-h: calc(clamp(14px, 1.25vw, 24px) + clamp(9px, 0.8125vw, 16px)
                   + 1.4 * var(--fs-nav));
  --pad-bot: clamp(10px, 1.3vw,    25px);   /* 21px @1600 */
  --gap-col: clamp(5px,  0.625vw,  12px);   /* 10px @1600 */
  --gap-row: clamp(3px,  0.3125vw,  6px);   /*  5px @1600 */

  /* Typographie */
  --ff-ui:      "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-display: "Helvetica Neue", Helvetica, Arial, "Outfit", sans-serif;

  --fs-ui:    clamp(0.8125rem, 0.9375vw, 1.125rem);  /* 15px @1600 */

  /* Le bandeau écrit un cran plus petit que le texte courant : en capitales,
     le corps du texte y paraissait trop gros. Même courbe que --fs-ui, à peu
     près six septièmes de sa valeur. 12,5px @1600, 15px à partir de 1920.
     Sous 600px il rejoint le texte courant — voir la section 24. */
  --fs-nav:   clamp(12px, 0.7813vw, 15px);
  --fs-tag:   clamp(0.625rem,  0.694vw,  0.83rem);   /* 11px @1600 */
  --fs-title: clamp(1.75rem,   3.047vw,  4.1rem);    /* 58,5px @1920 — hauteur de capitale 41,8 px */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-switch: 0.55s;   /* durée de la bascule accueil ↔ aperçu projet */

  /* Le geste des mots qui apparaissent — le titre du portfolio et les noms de
     projet de l'accueil s'appuient tous les deux dessus, un seul endroit à
     régler. L'arrivée est vive puis se pose (--ease), le départ s'attarde puis
     file (--ease-exit) : c'est cette dissymétrie qui donne le « roulé »
     plutôt qu'un simple fondu. Sur l'accueil seule l'arrivée est animée, le
     nom s'efface d'un coup quand on quitte la photo. */
  --ease-exit:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --word-travel:  0.24em;   /* course verticale, en em : elle suit le corps */
  --t-word:       0.375s;   /* durée de l'arrivée */
  --t-word-delay: 0.22s;    /* le nom laisse le calque s'installer avant d'entrer */
  --t-stagger:    0.15s;    /* écart entre deux visuels d'un même aperçu projet */

  /* Le zoom des vignettes du portfolio au survol : discret, et assez lent
     pour qu'on le sente sans le voir arriver. */
  --zoom:         1.045;
  --t-zoom:       0.6s;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--ff-ui);
  font-weight: 400;
  font-size: var(--fs-ui);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

/* Sur l'accueil, l'encre du cadre de focus est la couleur du fond : il faut
   l'inverser, sans quoi il ne se verrait pas. */
.nuit :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75em 1.25em;
  background: var(--c-ink);
  color: #fff;
}
.skip-link:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 2. En-tête ---------- */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(14px, 1.25vw, 24px) var(--pad) clamp(9px, 0.8125vw, 16px);

  /* Le header ne quitte plus le haut de l'écran. Ici il est dans le flux —
     accueil, portfolio, contacts — et « sticky » suffit : la mise en page ne
     bouge pas d'un pixel. Les pages projet, où il est déjà sorti du flux et
     posé sur la couverture, passent en fixed plus bas. */
  position: sticky;
  top: 0;
  z-index: 50;   /* au-dessus de la page, sous le lien d'évitement */

  /* Le bandeau s'écrit entièrement en capitales, comme sur la maquette : le
     nom comme les trois liens. Le léger interlettrage qui n'accompagnait que
     le nom vaut désormais pour toute la ligne — les capitales d'Outfit se
     touchent un peu quand on les serre. */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-nav);
}

/* L'apparence au défilement, toujours sans une ligne de script : l'animation
   n'avance pas avec le temps mais avec la position de défilement. En haut de
   page le header garde son allure d'origine ; dès qu'on descend, le fond blanc
   se pose puis l'ombre apparaît. Remonter rejoue la même chose à l'envers, il
   n'y a aucun état à mémoriser.

   Le fond arrive vite, au premier tiers de la course : il ne faut pas que le
   contenu défile derrière un header à moitié transparent. L'ombre, elle, prend
   toute la course — c'est elle qui donne la douceur. */
@supports (animation-timeline: scroll()) {
  .header {
    animation: header-fond linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 90px;
  }

  @keyframes header-fond {
    0%   { background-color: rgb(255 255 255 / 0); box-shadow: 0 2px 24px rgb(0 0 0 / 0%); }
    30%  { background-color: rgb(255 255 255 / 1); }
    100% { background-color: rgb(255 255 255 / 1); box-shadow: 0 2px 24px rgb(0 0 0 / 8%); }
  }

  /* Sur les couvertures sombres, le texte est blanc : il doit virer à l'encre
     en même temps que le fond, sans quoi il disparaîtrait. Les pages à
     couverture claire (--ink) écrivent déjà en noir : elles n'ont rien à
     animer. L'image reste ici, hors de toute requête de média — sur téléphone
     le header revient se poser sur la couverture et s'en ressert. */
  @keyframes header-encre {
    0%   { color: #fff; }
    30%  { color: var(--c-ink); }
    100% { color: var(--c-ink); }
  }

  /* Entre 600 et 1023px le header s'empile hors de la couverture et écrit
     déjà en noir : la bascule d'encre n'a lieu qu'aux deux extrémités. */
  @media (min-width: 1024px), (max-width: 599px) {
    .header--over:not(.header--ink) {
      animation: header-fond linear both, header-encre linear both;
      animation-timeline: scroll(root block), scroll(root block);
      animation-range: 0 90px, 0 90px;
    }
  }
}

/* Si le navigateur ne sait pas lier une animation au défilement, mieux vaut un
   header lisible en toutes circonstances qu'un header transparent devant du
   texte : il est alors blanc dès le haut de page. */
@supports not (animation-timeline: scroll()) {
  .header {
    background: var(--c-page);
    box-shadow: 0 2px 24px rgb(0 0 0 / 8%);
  }

  .header--over { color: var(--c-ink); }
}

/* la casse et l'interlettrage viennent du bandeau lui-même */
.header__brand {
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 6vw, 96px);
}

.nav__list {
  display: flex;
  align-items: center;
  /* Les trois mots sont un peu plus serrés que dans la maquette : 72px au lieu
     de 96 à 1600. La liste étant calée à droite, resserrer ne déplace
     qu'Accueil et Portfolio, Contacts reste sur la marge. Sous 1024px le header
     s'empile et une autre règle prend le relais, plus bas : cet écart-ci ne
     concerne donc que le header sur une ligne. */
  gap: clamp(24px, 4.5vw, 72px);
}

/* Sélecteur de langue — sans JavaScript, via <details> */

.lang {
  position: relative;
}

.lang__current {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  list-style: none;
}
.lang__current::-webkit-details-marker { display: none; }

.lang__current::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  margin-top: -0.22em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.lang[open] .lang__current::after {
  transform: rotate(-135deg);
  margin-top: 0.16em;
}

.lang__list {
  position: absolute;
  top: calc(100% + 0.75em);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 0.5em;
  padding: 0.75em 1em;
  background: var(--c-page);
  box-shadow: 0 2px 24px rgb(0 0 0 / 8%);
}

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .lang__list a:hover { color: var(--c-ink-soft); }
}

/* ---------- 3. Scène d'accueil (maquette NEW, page 1) ----------
   L'accueil n'est plus une mosaïque de carrés sur fond blanc : c'est une seule
   page-écran sur fond noir, où sept visuels sont posés librement autour du
   titre. Le principe de la page n'a pas changé — chacun de ces sept visuels
   est une case pivot, dont le survol fait basculer l'accueil vers l'aperçu de
   son projet — seule la composition est nouvelle.

   Tout est exprimé en pourcentage du cadre 1920 × 1080 de la maquette : la
   scène occupe exactement la fenêtre, et chaque visuel y garde sa place
   relative quelle que soit la taille de l'écran. Ce qui déborde en bas est
   rogné, comme sur le dessin. */

/* Le fond de l'accueil : #101010, la couleur relevée sur la maquette — c'est
   déjà l'encre du site, --c-ink. */
.nuit { background: var(--c-ink); color: #fff; }

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;   /* sur téléphone, la hauteur réellement visible */
  overflow: hidden;
}

/* 3.1 — Les sept visuels de l'accueil */

/* Les deux calques se superposent exactement : la mosaïque au-dessus, pour
   que la case survolée reste visible par-dessus l'aperçu qui se déploie. */
.mosaic,
.project {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mosaic  { z-index: 2; }
.project { z-index: 1; }

.cell {
  position: absolute;
  overflow: hidden;
}

.cell--img {
  display: block;
  pointer-events: auto;
}

/* Les sept visuels tiennent entiers dans leur cadre, au lieu de le remplir en
   se faisant rogner. Le cadre ne bouge pas d'un pixel : c'est la photographie
   qui se met à l'échelle du plus contraignant de ses deux côtés et se centre.
   Ce qui reste autour est le noir de la page. */
.cell--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--t-switch) var(--ease);
}

/* Plusieurs fichiers du site portent, sur un bord ou deux, un à cinq pixels de
   blanc laissés par leur détourage. Sur les pages blanches ils ne se voyaient
   pas ; sur le fond noir de l'accueil ils dessinent un filet clair le long du
   cadre.

   Les visuels des aperçus sont donc rognés d'un centième sur leurs quatre
   côtés, puis agrandis d'autant : la découpe et l'agrandissement se compensent,
   le cadre garde sa taille et le filet part avec la rognure.

   Les sept visuels de la mosaïque, eux, ne peuvent plus s'en accommoder : ils
   doivent se voir entiers, et ce centième leur mangerait un bord. Leurs quatre
   filets ont donc été retirés des fichiers eux-mêmes, au ciseau et sans
   réencodage — le portable, le livre bleu, l'affiche et la salle de
   conférence. */
.project__img {
  clip-path: inset(1%);
  transform: scale(1.0204);
}

/* Trois cadres viennent mourir sur un bord de l'écran : CCNN à droite, Visible
   à gauche, l'affiche du festival en bas. Leur photographie, centrée dans son
   cadre, s'en décollait — il restait une bande noire entre elle et le bord.
   On la pousse donc contre ce bord-là.

   Le décalage repris à chaque fois — 13, 8 et 6 px — est exactement le débord
   que ces cadres ont hors de l'écran, celui qui empêche le mouvement de la
   souris d'ouvrir un liseré. L'image vient ainsi tomber sur le bord de l'écran
   lui-même, pas sur celui du cadre : rien n'en sort, rien ne manque. */
.cell--pivot-ccn img     { object-position: right 13px top 50%; }
.cell--pivot-visible img { object-position: left 8px top 50%; }
.cell--pivot-loca img    { object-position: left 50% bottom 6px; }

/* Les visuels restent strictement immobiles au survol. Le titre du projet
   n'est là que pour nommer le lien (lecteurs d'écran). */
.cell__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cadre relevé sur la maquette NEW p.1, pour 1920 × 1080. C'est le repli :
   la composition complète, sans mouvement, pour les navigateurs qui ne
   comprennent pas l'écriture de la section suivante. */
.cell--pivot-dc      { left: 16.615%; top:  7.870%; width: 23.229%; height: 26.759%; }
.cell--pivot-bella   { left: 54.427%; top: -6px;    width: 14.427%; height: calc(34.630% + 6px); }
.cell--pivot-ccn     { left: 84.323%; top: 28.056%; width: calc(15.677% + 13px); height: 26.852%; }
.cell--pivot-visible { left: -8px;    top: 32.963%; width: calc(15.677% + 8px); height: 32.778%; }
.cell--pivot-sera    { left: 11.823%; top: 75.000%; width: 14.479%; height: 19.444%; }
.cell--pivot-loca    { left: 30.313%; top: 65.741%; width: 14.479%; height: calc(34.630% + 6px); }
.cell--pivot-dys     { left: 64.010%; top: 65.741%; width: 24.167%; height: 32.500%; }

/* 3.1 bis — Trois compositions, et tout ce qu'il y a entre elles

   L'accueil est dessiné trois fois : « NEW p.1 » pour le grand écran, large de
   1920, « Nouveau_accueil_tablette » pour 768, « Nouveau_accueil_telephone »
   pour 390. Les sept visuels y sont les mêmes et dans le même ordre — seuls
   leurs cadres changent. La page ne choisit donc pas entre trois mises en
   page : elle passe de l'une à l'autre en continu, chaque largeur de fenêtre
   ayant sa composition propre.

   Deux avancées mènent le mouvement, chacune entre 0 et 1 :

     --vers-tablette    0 à 1920, 1 à 768 et en dessous ;
     --vers-telephone   0 à 768,  1 à 390 et en dessous.

   Chaque bord de chaque visuel s'écrit alors « valeur du grand écran, plus ce
   qu'il faut pour rejoindre la tablette, plus ce qu'il faut pour rejoindre le
   téléphone ». Aux trois largeurs de référence on retombe exactement sur le
   dessin ; partout ailleurs on est entre deux.

   Le rapport se lit avec tan(atan2()) : c'est le seul moyen, en CSS, d'obtenir
   un nombre sans unité à partir d'une largeur de fenêtre. Là où cette écriture
   n'est pas comprise, les déclarations qui suivent sont ignorées et la page
   retombe sur le tableau du dessus — la composition du grand écran, puis la
   lecture en colonne de la section 4. */

.hero {
  --vers-tablette:  clamp(0, tan(atan2(1920px - 100vw, 1152px)), 1);
  --vers-telephone: clamp(0, tan(atan2( 768px - 100vw,  378px)), 1);

  /* Deux cadres prennent de l'avance et ont rejoint leur place de la maquette
     tablette dès 1520 : la hauteur du livre bleu et celle de la salle de
     conférence. Sur le grand écran, le livre tient sa distance au titre par la
     gauche ; sur la tablette, en passant dessous. Entre les deux il faut qu'il
     soit déjà bas quand la ligne s'allonge, sans quoi il la recouvrirait. La
     salle, elle, doit avoir fini de remonter avant que l'enveloppe ne glisse
     sous elle. */
  --en-avance:      clamp(0, tan(atan2(1920px - 100vw,  400px)), 1);

  /* Les trois lignes de texte rejoignent leur place du téléphone dès 668 :
     au-delà, le livre bleu les rattraperait par le bas. L'enveloppe suit le
     même pas — elle remonte avec elles, sinon le texte viendrait buter dessous
     le temps de la bascule. */
  --mots-tot:       clamp(0, tan(atan2( 768px - 100vw,  100px)), 1);

  /* Le haut du titre, relevé sur les trois dessins : 471/1080, 722/1790,
     602/1750. Les deux lignes qui le suivent s'y accrochent au lieu d'avoir
     chacune sa hauteur : leur corps est en vw, leur écart doit l'être aussi,
     sans quoi il se déforme dès que le format de l'écran s'écarte de celui du
     dessin.

     Elle est posée ici, sur la scène entière, et non sur le bloc de texte : les
     sept noms de projet sont des enfants directs de la scène, et c'est à cette
     hauteur-là qu'ils doivent venir — exactement celle du titre. */
  --titre-haut: calc(41.925% - var(--vers-tablette) * 2.907%
                             - var(--mots-tot) * 5.614%
                             - min(30px, 0.3 * max(0px, 760px - 100vh)) * (1 - var(--mots-tot)));

  /* Une troisième avancée, celle-ci menée par la hauteur.

     Les corps sont réglés sur la seule largeur — c'est ce que disent les trois
     dessins, et c'est ce qui leur garde une taille lisible quelle que soit la
     fenêtre. Mais la composition, elle, occupe toute la hauteur : dans une
     fenêtre basse le bloc de texte devient trop gros pour ce qui lui reste
     d'écran. À 1133 × 744, la ligne du titre tenait 55 % de la largeur — contre
     41 % sur le grand dessin — et venait toucher le livre bleu, qui arrive par
     la gauche : l'écart entre les deux tombait à un demi-pixel.

       --court   0 à 820 px de haut et au-dessus, 1 à 700 et en dessous.

     La hauteur, et non la largeur : les trois dessins sont dessinés sur des
     pages hautes — 1080, 1790, 1750 — et restent donc rendus au pixel près,
     chacun à sa largeur. Et la taille demeure une fonction croissante de la
     largeur, sans le creux qu'une correction posée sur elle aurait ouvert.

     Le facteur s'applique aux trois corps et aux deux écarts qui les séparent,
     dans la même proportion : le dessin ne se déforme pas, il rétrécit d'un
     bloc. Il ne descend jamais sous 0,87, et vaut 0,92 à 744 de haut — l'écart
     au livre y repasse de -0,6 à 25 px. */
  --court:  clamp(0, tan(atan2(820px - 100vh, 120px)), 1);
  --reduit: calc(1 - var(--court) * 0.13);
}

/*               grand écran            tablette              téléphone
   Dans'&Co      319 → 765 / 1920         0 → 675 / 1340        0 → 415 / 852
   Bella        1045 → 1322             717 → 1205            445 → bord
   CCNN         1619 → bord            1054 → bord            613 → bord
   Visible      bord →  301            bord →  342           bord →  145
   Séra          227 →  505            bord →  385           bord →  128
   Loca          582 →  860             385 →  855            280 →  687
   Itin. dys    1229 → 1693             749 → bord            154 → bord

   Quatre cadres du dessin téléphone ont été repris sur « page_accueil_mobile »,
   la maquette la plus récente : le carnet orange, qui y est la moitié plus
   grand et remonte jusqu'au bord droit ; le livre bleu et le sac, qui grandissent
   d'un peu plus d'un quart et sortent davantage par la gauche. Les trois autres
   y étaient déjà aux proportions du site, à moins de 2 % près, et n'ont pas
   bougé. Les colonnes « grand écran » et « tablette » sont inchangées.

   Les hauteurs suivent le même chemin. Elles sont en pourcentage de la hauteur
   de la fenêtre, les largeurs en pourcentage de sa largeur : la composition
   occupe l'écran quel qu'il soit, et ce qui déborde en bas est rogné — c'est le
   cas de l'affiche du festival sur les trois dessins. */
@supports (top: calc(1% * tan(atan2(1px, 1px)))) {
  .cell--pivot-dc      { left: calc(16.615% - var(--vers-tablette) * 16.615%); top: calc(7.870% - var(--vers-tablette) * 0.105% + var(--vers-telephone) * 5.892%); width: calc(23.229% + var(--vers-tablette) * 27.144% - var(--vers-telephone) * 1.664%); height: calc(26.759% + var(--vers-tablette) * 0.057% - var(--vers-telephone) * 9.501%); }
  .cell--pivot-bella   { left: calc(54.427% - var(--vers-tablette) * 0.920% - var(--vers-telephone) * 1.277%); top: -6px; width: calc(14.427% + var(--vers-tablette) * 21.991% + var(--vers-telephone) * 11.352%); height: calc(34.630% - var(--en-avance) * 7.591% - var(--vers-telephone) * 2.125% + 6px); }
  .cell--pivot-ccn     { left: calc(84.323% - var(--vers-tablette) * 5.666% - var(--vers-telephone) * 6.708%); top: calc(28.056% + var(--vers-tablette) * 1.329% - var(--mots-tot) * 2.757%); width: calc(15.677% + var(--vers-tablette) * 5.666% + var(--vers-telephone) * 6.708% + 13px); height: calc(26.852% - var(--vers-tablette) * 9.980% - var(--mots-tot) * 3.729%); }
  .cell--pivot-visible { left: calc(-8px - var(--vers-telephone) * 4.135%); top: calc(32.963% + var(--en-avance) * 14.579% - var(--vers-telephone) * 1.476%); width: calc(15.677% + var(--vers-tablette) * 9.845% + var(--vers-telephone) * 15.703% + 8px); height: calc(32.778% - var(--en-avance) * 10.152% - var(--vers-telephone) * 2.448%); }
  .cell--pivot-sera    { left: calc(11.823% - var(--vers-tablette) * 11.823% - var(--vers-telephone) * 8.770%); top: calc(75.000% + var(--vers-tablette) * 4.553% + var(--vers-telephone) * 2.445%); width: calc(14.479% + var(--vers-tablette) * 14.252% + var(--vers-telephone) * 12.869%); height: calc(19.444% - var(--vers-tablette) * 1.343% - var(--vers-telephone) * 4.628%); }
  /* Sur la maquette tablette l'affiche passe par-dessus le carnet : l'ordre du
     document ferait l'inverse. */
  .cell--pivot-loca    { z-index: 1; left: calc(30.313% - var(--vers-tablette) * 1.582% + var(--vers-telephone) * 4.133%); top: calc(65.741% - var(--vers-tablette) * 0.490% + var(--vers-telephone) * 3.434%); width: calc(14.479% + var(--vers-tablette) * 20.596% + var(--vers-telephone) * 12.695%); height: calc(34.630% + var(--vers-tablette) * 0.119% - var(--vers-telephone) * 3.434% + 6px); }
  .cell--pivot-dys     { left: calc(64.010% - var(--vers-tablette) * 8.114% - var(--vers-telephone) * 16.297%); top: calc(65.741% - var(--vers-tablette) * 12.724% - var(--vers-telephone) * 3.714%); width: calc(24.167% + var(--vers-tablette) * 19.937% + var(--vers-telephone) * 16.297%); height: calc(32.500% - var(--vers-tablette) * 6.522% - var(--vers-telephone) * 4.724%); }
}

/* Quatre de ces cadres viennent mourir sur un bord de l'écran : Bella en haut,
   CCNN à droite, Visible à gauche, Loca en bas. Si le mouvement de la souris
   les ramène vers l'intérieur, ils décollent du bord et ouvrent un liseré noir
   là où la maquette n'en montre aucun. On les prolonge donc de quelques pixels
   au-delà de ce bord-là — juste un peu plus que leur course. Le prolongement
   part hors de l'écran, où rien ne se voit : les trois autres côtés de chaque
   cadre restent exactement là où la maquette les pose. */

/* 3.1 bis — Le mouvement de la souris

   Les sept visuels ne sont pas tout à fait posés sur le même plan. Quand la
   souris traverse la page, chacun s'en va d'une longueur qui lui est propre,
   dans la même direction qu'elle et avec un temps de retard différent : c'est
   ce décalage qui creuse la page. L'œil lit les plus mobiles comme étant
   devant, les plus lents comme étant au fond.

   Deux valeurs par visuel :

   --par-amp    la course, en pixels, du milieu de l'écran à son bord, pour une
                page large de 1920 — elle se réduit à proportion sur les
                fenêtres plus étroites. La course verticale en vaut un peu plus
                de la moitié : la page est bien plus large que haute, un
                déplacement vertical de même ampleur s'y verrait deux fois plus.

   --par-suivi  la part du chemin restant que le visuel parcourt à chaque image,
                soixante fois par seconde : plus la valeur est basse, plus il
                traîne derrière le curseur. Aucun visuel ne rejoint jamais la
                souris — il tend vers sa place sans jamais la coller.

   Le mouvement lui-même est porté par assets/js/parallax.js : la position du
   curseur ne se lit pas en CSS, c'est la seule chose du site qui demande un
   script. Sans lui la page reste exactement celle d'avant — ces valeurs ne
   servent alors à personne et rien ne bouge. */

.cell--pivot-dc      { --par-amp: 17; --par-suivi: 0.075; }
.cell--pivot-bella   { --par-amp:  9; --par-suivi: 0.050; }
.cell--pivot-ccn     { --par-amp: 12; --par-suivi: 0.060; }
.cell--pivot-visible { --par-amp:  7; --par-suivi: 0.045; }
.cell--pivot-sera    { --par-amp:  6; --par-suivi: 0.042; }
.cell--pivot-loca    { --par-amp: 13; --par-suivi: 0.065; }
.cell--pivot-dys     { --par-amp: 19; --par-suivi: 0.082; }

/* Les visuels des aperçus suivent la même règle, dans l'ordre où le document
   les pose : quatre plans, les mêmes pour tous les projets. Ils s'installent
   déjà en escalier au survol — le mouvement de la souris prolonge simplement
   cet ordre-là. */
.project__img:nth-child(1) { --par-amp: 15; --par-suivi: 0.070; }
.project__img:nth-child(2) { --par-amp:  8; --par-suivi: 0.048; }
.project__img:nth-child(3) { --par-amp: 18; --par-suivi: 0.078; }
.project__img:nth-child(4) { --par-amp: 11; --par-suivi: 0.056; }

/* 3.2 — Le titre et les deux lignes qui l'accompagnent

   Les trois lignes sont centrées sur le milieu de la page et calées chacune
   par le haut de sa capitale, relevé sur la maquette : 471 px pour le titre,
   534 pour la ligne des métiers, 573 et 595 pour les deux lignes du texte.
   Elles s'effacent ensemble dès qu'un visuel est survolé, et le nom du projet
   vient prendre exactement la place du titre. */
.hero__mots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;


  /* Le dernier terme ne joue que dans les fenêtres basses. Le bloc de texte est
     réglé sur la largeur — c'est ce que disent les trois dessins — tandis que la
     composition, elle, se comprime avec la hauteur : sous 760 px de haut les
     deux lignes du bas finissaient par tomber sur le carnet orange. On remonte
     le bloc au lieu de le rapetisser : la taille reste une fonction de la seule
     largeur, sans à-coup, et ce décalage ne dépasse jamais 30 px. Il s'efface
     sous 768 px, où le bloc est déjà remonté de lui-même. */
}

.hero__title,
.project__title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  /* Le corps suit les trois dessins : 58,5 px à 1920, 43,3 à 768, 25,6 à 390 —
     soit les capitales relevées, 41,8 px pour 1920, 54 pour 1340, 40 pour 852.

     Entre deux dessins la taille suit une droite. C'est le point délicat :
     écrire « tant de vw multiplié par l'avancée » donne une parabole — la
     taille passe par un maximum au milieu de la plage et diminue quand on
     élargit la fenêtre. Les écarts sont donc en pixels, l'avancée seule
     variant avec la largeur.

     Les deux bornes prolongent la droite sans la casser : au-delà de 1920 la
     ligne reprend la croissance qu'elle avait jusqu'à son plafond, en dessous
     de 390 elle se remet à l'échelle de la page pour ne pas déborder. */
  font-size: calc(min(6.5754vw,
                      max(min(3.047vw, 4.1rem),
                          calc(58.5px - var(--vers-tablette) * 15.17px
                                      - var(--vers-telephone) * 17.69px)))
                 * var(--reduit));
  line-height: 1.3162;  /* 77 px à 1920 : l'écart des deux lignes du CCNN */
  letter-spacing: calc(0.0322em - var(--vers-tablette) * 0.0372em
                                + var(--vers-telephone) * 0.0074em);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Le corps est réglé sur la hauteur de capitale de la maquette — 42 px à
   1920 — et l'approche sur la longueur de la ligne du titre, 784 px : les
   sept noms de projet tombent alors à moins de 3 % de leur largeur relevée.

   Le haut de la capitale se pose à 471/1080 de la page, soit une ligne dont
   le cadre commence 18 px plus haut : c'est l'écart que la fonte laisse
   au-dessus de ses capitales, mesuré à l'écran. */
/* Haut de capitale relevé sur les trois dessins : 471/1080, 722/1790, 602/1750. */
.hero__title,
.project__title { top: var(--titre-haut); }

.hero__metier,
.hero__intro {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  color: var(--c-gris-nuit);
  text-align: center;
  pointer-events: none;
}

/* Les deux lignes ne suivent pas tout à fait le même chemin : sur la maquette
   tablette la ligne des métiers est écrite un peu plus grand que le texte,
   alors que les deux se rejoignent sur celle du téléphone. Capitales relevées :
   18 px pour 1920, 17 et 15 pour 1340, 16 et 16 pour 852. */
.hero__metier {
  /* 18 px à 1920, 14,0 à 768, 10,6 à 390 */
  font-size: calc(min(2.7059vw,
                      max(min(0.9375vw, 1.125rem),
                          calc(18px - var(--vers-tablette) * 3.97px
                                    - var(--vers-telephone) * 3.48px)))
                 * var(--reduit));
  line-height: 1.222;
}

.hero__intro {
  /* 18 px à 1920, 12,4 à 768, 10,6 à 390 */
  font-size: calc(min(2.7059vw,
                      max(min(0.9375vw, 1.125rem),
                          calc(18px - var(--vers-tablette) * 5.62px
                                    - var(--vers-telephone) * 1.83px)))
                 * var(--reduit));
  /* 22 px pour 18 à 1920 ; 24 pour 21,6 sur la tablette ; 29 pour 23 au
     téléphone — l'écart de deux lignes de base, relevé sur chaque dessin. */
  line-height: calc(1.222 - var(--vers-tablette) * 0.1116
                          + var(--vers-telephone) * 0.1475);
}

.hero__metier {
  /* La maquette pose cette ligne à 48,94 % : elle vient alors buter sous le
     titre, à 20 px de sa ligne de base, quand l'introduction respire à 27,5.
     On la descend d'un demi-point, l'introduction avec elle, pour que les deux
     écarts se valent. */
  /* Écart au haut de capitale du titre : 69 px à 1920, 47,5 à 768, 31 à 390.
     Il suit les corps — mêmes droites, mêmes bornes. */
  top: calc(var(--titre-haut) + min(9.228vw,
                                    max(4.313vw,
                                        calc(82.82px - var(--vers-tablette) * 25.68px
                                                     - var(--vers-telephone) * 21.15px)))
                              * var(--reduit));
  text-transform: uppercase;
  /* Les deux dessins serrés écartent nettement plus les capitales que celui du
     grand écran : la valeur vient de la longueur de la ligne, 560 px pour 1340
     sur la tablette, 552 pour 852 au téléphone. */
  letter-spacing: calc(0.004em + var(--vers-tablette) * 0.021em
                               + var(--vers-telephone) * 0.029em);
}

/* Le petit carré qui sépare les deux métiers : 6 px de côté à 1920, posé à
   égale distance des deux mots. */
.hero__puce {
  display: inline-block;
  width: 0.333em;
  height: 0.333em;
  margin: 0 0.52em;
  background: currentColor;
  vertical-align: 0.14em;
}

/* 109 px à 1920, 72,7 à 768, 51,7 à 390. */
.hero__intro { top: calc(var(--titre-haut) + min(14.459vw,
                                                 max(6.392vw,
                                                     calc(122.72px - var(--vers-tablette) * 39.36px
                                                                   - var(--vers-telephone) * 26.97px)))
                                            * var(--reduit)); }

/* Repli du texte.

   Les corps et les hauteurs ci-dessus passent tous par var() : quand une
   écriture n'est pas comprise, la déclaration n'est pas simplement ignorée —
   elle est annulée, et la propriété retombe sur sa valeur héritée. Le titre s'y
   retrouverait à la taille du texte courant. On lui rend donc ici, et à lui
   seul, les valeurs du grand écran : la même page qu'avant tout ceci. */
@supports not (top: calc(1% * tan(atan2(1px, 1px)))) {
  .hero__title,
  .project__title {
    top: 41.925%;
    font-size: var(--fs-title);
    letter-spacing: 0.0322em;
  }

  .hero__metier {
    top: 49.59%;
    font-size: var(--fs-ui);
    line-height: 1.222;
    letter-spacing: 0.004em;
  }

  .hero__intro {
    top: 53.29%;
    font-size: var(--fs-ui);
    line-height: 1.222;
  }
}

/* 3.3 — Bascule vers l'aperçu du projet

   Le survol d'une case pivot fait basculer l'accueil vers la composition de
   l'aperçu (maquettes NEW p.2 à p.7). La case pivot est le seul visuel commun
   aux deux états : elle reste en place et tout pivote autour d'elle.
   Entièrement en CSS, via :has(). */

.project__img {
  position: absolute;
  object-fit: cover;
  opacity: 0;

  /* Aucune transition au repos : dès qu'on quitte la photo, tout l'aperçu
     disparaît d'un coup, comme le nom du projet. Le fondu d'arrivée et son
     retard ne vivent que dans l'état survolé, plus bas. */
  transition: none;
}

/* Emplacements relevés sur la maquette NEW p.2 — Bella Letteratura */
.project__img--bl-tote  { left:  6.979%; top: 17.222%; width: 23.229%; height: 40.556%; }
.project__img--bl-badge { left: 74.635%; top: 31.111%; width: 25.365%; height: 44.259%; }
.project__img--bl-book  { left:  0;      top: 59.528%; width: 35.052%; height: 40.472%; }
.project__img--bl-panel { left: 45.625%; top: 75.370%; width: 23.229%; height: 19.907%; }

/* Maquette NEW p.3 — Centre chorégraphique national de Nantes */
/* Le cadre est bien plus large que haut, la photographie déborde donc par le
   haut et par le bas, et c'est ce chiffre qui dit ce qu'on en garde. À un quart,
   les trois affiches tombaient au bas du cadre : cent quarante pixels de mur
   au-dessus d'elles, vingt-cinq en dessous. Elles sont maintenant posées
   presque au milieu — quinze pixels plus bas que le centre exact, ce qui laisse
   le reflet du sol hors du cadre dans les formats courants. */
.project__img--cc-saison  { left:  2.031%; top:  6.667%; width: 37.813%; height: 31.852%;
                            object-position: 50% 48%; }
.project__img--cc-prog    { left:  0;      top: 63.241%; width: 25.365%; height: 36.759%; }
.project__img--cc-danseur { left: 35.990%; top: 63.241%; width: 13.542%; height: 23.981%; }
/* Le cadre est bien plus étroit que le fichier : le recadrage en prend le
   milieu, et les deux bandes noires qui restaient de part et d'autre de la
   lettre n'étaient pas de la même largeur — celles du fichier ne l'étaient pas
   non plus, et le recadrage en creusait l'écart. La lettre a donc été recentrée
   sur son fond dans le fichier lui-même : les marges y sont maintenant égales,
   et le restent quel que soit le format de la fenêtre. */
.project__img--cc-news    { left: 69.792%; top: 59.907%; width: 13.594%; height: 42.778%; }

/* Maquette NEW p.4 — Visible, Invisible */
.project__img--vi-mer       { left: 54.375%; top:  0;      width: 20.260%; height: 35.370%; }
.project__img--vi-portraits { left: 64.948%; top: 59.074%; width: 35.052%; height: 40.926%; }
.project__img--vi-neige     { left: 20.521%; top: 65.741%; width: 29.010%; height: 26.944%; }

/* Maquette NEW p.5 — Loca Locavore */
.project__img--lo-gobelets { left: 55.313%; top:  0;      width: 19.323%; height: 34.167%; }
.project__img--lo-flyer    { left:  2.031%; top: 21.852%; width: 23.229%; height: 40.556%; }
.project__img--lo-foule    { left: 68.854%; top: 54.074%; width: 31.146%; height: 35.833%; }

/* Maquette NEW p.6 — Itinéraire dys */
.project__img--dy-osb        { left: 21.458%; top: -0.185%; width: 29.010%; height: 31.019%; }
.project__img--dy-ressources { left:  0;      top: 48.241%; width: 26.406%; height: 51.759%; }
/* la maquette entoure la carte des chiffres d'un filet orange, la couleur du
   projet : le fichier, lui, est détouré sur du blanc */
.project__img--dy-chiffre    { left: 78.646%; top: 17.685%; width: 10.313%; height: 18.241%;
                               border: 1px solid var(--c-dys); }
.project__img--dy-citation   { left: 35.052%; top: 63.843%; width: 10.573%; height: 18.704%; }

/* Maquette NEW p.7 — Dans'&Co */
.project__img--dc-oriflamme { left: 79.479%; top:  7.870%; width: 20.521%; height: 55.833%; }
.project__img--dc-pochon    { left:  6.042%; top: 39.444%; width: 10.625%; height: 18.796%; }
.project__img--dc-danse     { left: 50.469%; top: 63.704%; width: 23.229%; height: 27.222%; }
.project__img--dc-tel       { left: 21.458%; top: 67.037%; width: 18.385%; height: 32.963%; }

/* Séra n'a plus d'aperçu : le projet n'est pas encore en ligne, sa case
   n'ouvre rien et montre à la place une étiquette accrochée à la souris
   (section 3.4). Les cadres de son ancienne composition sont conservés en
   commentaire, pour le jour où elle reviendra :
   se-site      left 16.615% top  7.870% width 23.229% height 26.759%
   se-visage    left 79.479% top  7.870% width 20.521% height 55.833%
   se-essentiel left 55.313% top 63.241% width 15.469% height 27.500% */

/* Le nom du projet prend exactement la place du titre de l'accueil : même
   centre, même corps, même hauteur de capitale.

   Il monte et se pose, comme le mot du titre de la page Portfolio : même
   course, même courbe d'arrivée. Au repos il attend en dessous de sa place.

   Aucune transition sur l'état de repos : dès qu'on quitte la photo, le nom
   disparaît net et se replace en bas, prêt pour la prochaine entrée. Seul
   l'état survolé porte une transition, plus bas. */
.project__title {
  opacity: 0;
  transform: translateY(var(--word-travel));
  transition: none;
}

/* --- l'état basculé --- */

.hero__mots {
  transition: opacity var(--t-switch) var(--ease);
}

/* Dès qu'un pivot est survolé, tous les autres visuels s'effacent, ainsi que
   le titre et les deux lignes qui le suivent. Seule la case survolée demeure :
   c'est le point fixe autour duquel la page pivote. */
/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .hero:has(.cell--pivot:is(:hover, :focus-visible)) .cell--img:not(:hover):not(:focus-visible) img,
  .hero:has(.cell--pivot:is(:hover, :focus-visible)) .hero__mots {
    opacity: 0;
  }
}

/* Chaque pivot n'ouvre que son propre calque */
/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .hero:has(.cell--pivot-bella:is(:hover, :focus-visible)) .project--bella .project__img,
  .hero:has(.cell--pivot-bella:is(:hover, :focus-visible)) .project__title--bella,
  .hero:has(.cell--pivot-visible:is(:hover, :focus-visible)) .project--visible .project__img,
  .hero:has(.cell--pivot-visible:is(:hover, :focus-visible)) .project__title--visible,
  .hero:has(.cell--pivot-loca:is(:hover, :focus-visible)) .project--loca .project__img,
  .hero:has(.cell--pivot-loca:is(:hover, :focus-visible)) .project__title--loca,
  .hero:has(.cell--pivot-dc:is(:hover, :focus-visible)) .project--dc .project__img,
  .hero:has(.cell--pivot-dc:is(:hover, :focus-visible)) .project__title--dc,
  .hero:has(.cell--pivot-dys:is(:hover, :focus-visible)) .project--dys .project__img,
  .hero:has(.cell--pivot-dys:is(:hover, :focus-visible)) .project__title--dys,
  .hero:has(.cell--pivot-ccn:is(:hover, :focus-visible)) .project--ccn .project__img,
  .hero:has(.cell--pivot-ccn:is(:hover, :focus-visible)) .project__title--ccn {
    opacity: 1;
  }
}

/* Les noms de projet rejoignent leur place avec la courbe d'arrivée, après un
   court retard : le calque de photos a le temps de s'installer, le nom se pose
   dessus juste avant que la bascule ne soit terminée. */
/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .hero:has(.cell--pivot-bella:is(:hover, :focus-visible))   .project__title--bella,
  .hero:has(.cell--pivot-visible:is(:hover, :focus-visible)) .project__title--visible,
  .hero:has(.cell--pivot-loca:is(:hover, :focus-visible))    .project__title--loca,
  .hero:has(.cell--pivot-dc:is(:hover, :focus-visible))      .project__title--dc,
  .hero:has(.cell--pivot-dys:is(:hover, :focus-visible))     .project__title--dys,
  .hero:has(.cell--pivot-ccn:is(:hover, :focus-visible))     .project__title--ccn {
    transform: none;
    transition: opacity   var(--t-word) var(--ease) var(--t-word-delay),
                transform var(--t-word) var(--ease) var(--t-word-delay);
  }
}

/* Les visuels du calque n'arrivent plus ensemble : chacun attend un cran de plus
   que le précédent, dans l'ordre où le document les pose. Le premier part sans
   retard, d'où l'absence de règle pour lui. Quatre crans suffisent — les
   calques les plus fournis en comptent quatre.

   Le fondu comme le retard ne vivent que dans l'état survolé : dès qu'on quitte
   la photo, la règle ne s'applique plus, il ne reste aucune transition et tout
   l'aperçu disparaît net — ni escalier à l'envers, ni fondu de sortie. */
/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .hero:has(.cell--pivot:is(:hover, :focus-visible)) .project__img {
    transition: opacity var(--t-switch) var(--ease);
  }
}

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .hero:has(.cell--pivot:is(:hover, :focus-visible)) .project__img:nth-child(2) { transition-delay: calc(var(--t-stagger) * 1); }
}
/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .hero:has(.cell--pivot:is(:hover, :focus-visible)) .project__img:nth-child(3) { transition-delay: calc(var(--t-stagger) * 2); }
}
/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .hero:has(.cell--pivot:is(:hover, :focus-visible)) .project__img:nth-child(4) { transition-delay: calc(var(--t-stagger) * 3); }
}
/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .hero:has(.cell--pivot:is(:hover, :focus-visible)) .project__img:nth-child(5) { transition-delay: calc(var(--t-stagger) * 4); }
}

/* Quand le système demande moins de mouvement, le nom se contente de son
   fondu, sans la course verticale, et les visuels arrivent ensemble plutôt que
   d'entretenir le mouvement pendant deux secondes et demie. */
@media (prefers-reduced-motion: reduce) {
  .project__title { transform: none; }
    /* Survol réservé aux appareils à souris : sur un écran tactile un
     appui laisserait l'effet « collé » jusqu'au suivant. */
  @media (hover: hover) and (pointer: fine) {
    .hero:has(.cell--pivot:is(:hover, :focus-visible)) .project__img { transition-delay: 0s; }
  }
}

/* 3.4 — L'étiquette de Séra

   Séra est le seul projet qui n'ouvre pas d'aperçu : il n'est pas encore en
   ligne. Sa case ne porte donc pas la classe cell--pivot, et rien ne bascule
   quand on la survole. À la place, une étiquette vient se pendre au curseur et
   le suit tant qu'il reste sur la photographie. C'est le script qui la crée et
   la déplace — la position de la souris ne se lit pas en CSS ; ici on ne fait
   que la dessiner.

   Un aplat plein plutôt qu'un fond transparent : l'étiquette passe surtout sur
   des photographies, souvent claires. Elle prend donc le contraire de la page
   qui la porte — l'encre sur le blanc du portfolio, le blanc sur le noir de
   l'accueil — et se lit dans les deux cas. */
.etiquette {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  margin: 0;
  padding: 6px 12px 7px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-page);
  font-family: var(--ff-ui);
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;   /* elle ne doit jamais voler le survol à la case */
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

.nuit .etiquette {
  background: var(--c-page);
  color: var(--c-ink);
}

.etiquette--vue { opacity: 1; }

/* ---------- 4. Adaptations ---------- */

/* Tablette et mobile : la page-écran laisse place à une lecture verticale —
   le titre et sa présentation, puis les sept projets. Le fond reste noir. */
@media (max-width: 1023px) {

  /* Le bandeau ne s'empile pas : sur tablette, toutes les pages gardent celui
     de l'accueil — une seule ligne, le nom à gauche, les trois liens à droite,
     dans le même corps et les mêmes retraits que sur grand écran. La hauteur
     qui décale les ancres reste donc celle d'une ligne, définie une fois pour
     toutes en tête de feuille. */
  .header {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .nav {
    width: auto;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .nav__list { gap: clamp(20px, 5vw, 44px); }

  /* la bascule suppose la composition plein écran : au doigt, la case pivot
     mène directement à la page projet */
  .project,
  .project__title { display: none; }

    /* Survol réservé aux appareils à souris : sur un écran tactile un
     appui laisserait l'effet « collé » jusqu'au suivant. */
  @media (hover: hover) and (pointer: fine) {
    .hero:has(.cell--pivot:is(:hover, :focus-visible)) .cell--img img,
    .hero:has(.cell--pivot:is(:hover, :focus-visible)) .hero__mots { opacity: 1; }
  }
}

/* La ligne du bandeau est désormais la même partout ; ce qui reste propre à
   l'accueil, c'est sa position hors du flux. Tant qu'il garde sa composition
   en écran, la composition passe dessous : le bandeau ne peut pas la
   repousser. Les autres pages, elles, ouvrent sur une couverture posée après
   le bandeau, qui reste donc dans le flux sous 1024 px. */
@supports (top: calc(1% * tan(atan2(1px, 1px)))) {
  @media (max-width: 1023px) {
    body:has(.hero) .header--over { position: fixed; }
  }
}

/* L'accueil garde sa composition en écran jusqu'en bas : les maquettes
   « Nouveau_accueil_tablette » et « Nouveau_accueil_telephone » la redessinent
   pour un cadre debout, elles ne l'empilent pas — c'est la section 3.1 bis qui
   mène d'un dessin à l'autre, sans palier.

   La lecture en colonne qui suit n'est plus qu'un repli : elle ne sert qu'aux
   navigateurs qui ne comprennent pas l'écriture de cette section-là, et qui
   resteraient sinon sur la composition du grand écran, écrasée. */
@supports not (top: calc(1% * tan(atan2(1px, 1px)))) {
  @media (max-width: 1023px) {

  /* La scène redevient une colonne qui se déroule. Le bandeau étant posé
     par-dessus, le premier retrait le dégage. */
  .hero {
    /* la lecture est en colonne, la page s'allonge : une fenêtre basse ne
       serre plus rien, le facteur de réduction n'a plus lieu d'être */
    --court: 0;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vw, 44px);
    padding: calc(var(--header-h) + clamp(24px, 5vw, 48px)) var(--pad) var(--pad-bot);
  }

  .hero__mots {
    position: static;
    order: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.6vw, 18px);
  }

  .hero__title,
  .hero__metier,
  .hero__intro {
    position: static;
    text-align: left;
  }

  .hero__title {
    font-size: clamp(2.25rem, 8vw, 4rem);
    line-height: 1.05;
    white-space: normal;
  }

  /* la coupe de la maquette est calée sur une ligne de 1920 px de large :
     ici le texte se replie tout seul */
  .hero__intro br { display: none; }

  .mosaic {
    position: static;
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-shot);
    pointer-events: auto;
  }

  /* les cases quittent la composition libre et reprennent le carré de la
     grille : les quatre valeurs relevées sur la maquette n'ont plus cours */
  .cell {
    position: static;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  }
}


/* La composition de l'accueil, à toutes les largeurs, est en section 3.1 bis. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   PAGE PROJET  (maquette p.3 — Bella Letteratura Forum)
   ========================================================= */

:root {
  --c-rule:  #ebebeb;
  --c-black: #111111;

  --fs-body: clamp(0.85rem, 0.97vw, 1rem);      /* 15,5px @1600 */

  --gap-shot: clamp(12px, 1.56vw, 25px);        /* 25px @1600, entre deux visuels */
  --sp-md:    clamp(38px, 5.2vw, 83px);         /* 83px @1600 */
  --sp-lg:    clamp(60px, 8vw, 128px);          /* 128px @1600 */
  --sp-xl:    clamp(80px, 13.25vw, 212px);      /* 212px @1600 */
}

/* Largeur de contenu commune : les mêmes marges que l'accueil */
.wrap {
  padding: 0 var(--pad);
}

/* ---------- 5. En-tête posé sur la couverture ---------- */

.header--over {
  /* Déjà hors du flux et posé sur la couverture : passer d'absolute à fixed ne
     change rien tant qu'on n'a pas défilé, et le retient ensuite en haut. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: #fff;
}

.header--over .lang__list {
  background: var(--c-black);
}

/* L'accueil est une page-écran noire : le bandeau y écrit en blanc à toutes
   les largeurs, et le fond qui vient au défilement — sur téléphone et
   tablette, où la page se déroule — est celui de la page et non le blanc des
   autres pages. Au-dessus de 1024px la page ne défile pas : il reste
   transparent. */
.header--over.header--nuit { color: #fff; }

/* Les deux maquettes serrées font monter la photographie de la salle de
   conférence jusqu'au bord haut de la page : le nom, les liens et le bouton du
   menu s'y posent dessus, et l'écran du vidéoprojecteur est le seul endroit
   clair du dessin. Un liseré sombre les en détache. Sur le fond noir des
   autres pages il ne se voit pas — c'est du noir sur du noir. */
.header--over.header--nuit .header__brand,
.header--over.header--nuit .nav__link { text-shadow: 0 0 4px rgb(0 0 0 / 55%); }

/* Les trois barres ne font qu'un pixel : sur l'écran du vidéoprojecteur,
   l'unique zone claire de la photographie, un simple liseré ne suffisait pas
   à les détacher. Deux ombres superposées — une serrée pour le contour, une
   large pour l'assise — les rendent lisibles sans épaissir le trait, donc
   sans toucher au dessin. */
.header--over.header--nuit .burger span {
  box-shadow: 0 0 3px rgb(0 0 0 / 90%), 0 0 7px rgb(0 0 0 / 60%);
}

/* Une ombre ne pouvait pas sauver les trois barres du menu : un trait d'un
   pixel n'offre presque aucune surface pour porter un contraste. On assombrit
   donc le fond plutôt que d'épaissir le trait — le dessin du bouton reste
   celui de la maquette.

   Le voile est un dégradé du noir vers le transparent, posé derrière le
   contenu du bandeau (z-index négatif dans le contexte que crée son z-index
   50) et débordant sous lui pour que l'extinction soit douce. Sur le fond noir
   des pages il ne se voit pas — c'est du noir sur du noir ; il n'agit que là
   où une photographie claire passe dessous, ce qui est précisément le cas de
   l'écran du vidéoprojecteur, sur l'accueil. Le nom en profite autant que le
   bouton. */
@media (max-width: 1023px) {
  .header--over.header--nuit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 210%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
                                rgb(0 0 0 / 62%) 0%,
                                rgb(0 0 0 / 38%) 45%,
                                rgb(0 0 0 / 0%) 100%);
  }
}

/* Aux largeurs de téléphone et de tablette la composition se resserre, et la
   fin du titre passe devant l'enveloppe bleue d'« Exit Above ». Le bloc de
   texte est au-dessus de la mosaïque — il reste entier — mais du blanc sur ce
   bleu clair se lit mal. La même ombre que le bandeau l'en détache, sans
   déplacer d'un pixel le dessin de la mosaïque. */
@media (max-width: 1023px) {
  .hero__title,
  .hero__metier {
    text-shadow: 0 0 6px rgb(0 0 0 / 70%), 0 0 14px rgb(0 0 0 / 45%);
  }
}

@supports (animation-timeline: scroll()) {
  .header--over.header--nuit {
    animation: header-nuit linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 90px;
  }

  @keyframes header-nuit {
    0%   { background-color: rgb(16 16 16 / 0); box-shadow: none; }
    30%  { background-color: rgb(16 16 16 / 1); }
    100% { background-color: rgb(16 16 16 / 1); box-shadow: none; }
  }
}

@supports not (animation-timeline: scroll()) {
  .header--over.header--nuit {
    background: var(--c-ink);
    box-shadow: none;
  }
}

/* La maquette éteint les deux rubriques que l'on ne consulte pas : seule la
   page courante reste blanche, les autres passent au gris des lignes qui
   suivent le titre. Sous 600px la navigation est un dépliant sur fond blanc :
   elle garde l'encre du menu. */
@media (min-width: 600px) {
  .header--nuit .nav__link { color: var(--c-gris-nuit); }

  .header--nuit .nav__link[aria-current="page"],
  .header--nuit .nav__link:focus-visible { color: #fff; }

  /* Survol réservé aux appareils à souris : sur un écran tactile un
     appui laisserait l'effet « collé » jusqu'au suivant. */
  @media (hover: hover) and (pointer: fine) {
    .header--nuit .nav__link:hover { color: #fff; }
  }
}

/* ---------- 6. Couverture ---------- */

.cover {
  position: relative;
  aspect-ratio: 1600 / 838;
  overflow: hidden;
  background: var(--c-black);
}

/* L'image déborde d'un pixel sur les quatre côtés, et le cadre le rogne.
   Les proportions des couvertures et celles des photographies ne tombent pas
   exactement juste — il ne reste par endroits qu'un dixième de pixel de marge
   au recadrage — et selon la largeur de l'écran l'arrondi au pixel laissait
   passer un trait du fond noir le long d'un bord. Ce pixel de battement le
   supprime sans rien déplacer : la marge négative recentre le débordement. */
.cover__img {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;   /* sinon la borne générale ravale le débordement */
  margin: -1px;
  object-fit: cover;
}

.cover__title {
  position: absolute;
  left: var(--pad);
  bottom: 4.3%;
  margin: 0;
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.75vw, 4rem);       /* capitale 43px @1600 */
  line-height: 1.017;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.cover__line { display: block; }

.cover__line--sub {
  font-size: 0.44em;   /* 26,5px pour 60px */
  line-height: 1.27;
}

/* ---------- 7. Rangées label / texte ---------- */

.row {
  display: grid;
  grid-template-columns: 29.9% minmax(0, 59.1%);
  margin: 0;
}

/* la section couleur ouvre son bloc : un peu plus d'air au-dessus du filet */
.wrap > .row--rule:first-child { margin-top: clamp(4px, 0.625vw, 10px); }

.row--rule {
  padding-top: clamp(9px, 1vw, 16px);
  border-top: 1px solid var(--c-rule);
}

.row--meta {
  padding: clamp(12px, 1.4vw, 22px) 0 clamp(38px, 4.7vw, 75px);
}

.row__label {
  margin: 0;
  font-size: var(--fs-tag);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.row--meta .row__text {
  font-size: var(--fs-tag);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.row--meta .sep {
  display: inline-block;
  padding: 0 0.6em;
}

.row__text {
  font-size: var(--fs-body);
  line-height: 1.35;
}

.row__text p { margin: 0; }
.row__text p + p { margin-top: 1.35em; }

/* ---------- 8. Le logotype annoté ---------- */

.diagram {
  position: relative;
  aspect-ratio: 1531 / 459;
  margin: var(--sp-xl) 0 var(--sp-lg);
  font-size: var(--fs-body);
  line-height: 1.33;
}

.diagram__logo {
  position: absolute;
  left: 39.58%;
  top: 1.96%;
  width: 35.14%;
  height: auto;
}

.diagram__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Les traits d'appel passent au-dessus des logotypes. Les fichiers sont
   opaques : leur fond blanc masquait la fin des traits, qui s'arrêtaient donc
   au bord du cadre de l'image et non à la distance voulue du dessin. Le blanc
   du fichier et celui de la page étant le même, rien d'autre ne change.
   Dans'&Co fait exception : son demi-arc est tracé pour disparaître sous le
   logotype, il reste donc dessous. */
.diagram--bella .diagram__lines,
.diagram--loca  .diagram__lines,
.diagram--dys   .diagram__lines,
.diagram--dc2   .diagram__lines { z-index: 1; }

.diagram__lines line {
  stroke: #cfcfcf;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.diagram__note {
  position: absolute;
  z-index: 2;   /* au-dessus des traits d'appel */

  /* Les traits d'appel sont tracés à des coordonnées fixes, les annotations
     composées sur la largeur de leur texte : quand la fenêtre se resserre, le
     texte occupe relativement plus de place et le trait finit par courir
     dessous. Plutôt que de raccourcir chaque trait pour chaque largeur — ce
     qu'aucune coordonnée fixe ne peut faire —, l'annotation porte le fond de la
     page et le masque : le trait s'arrête donc toujours net à six pixels du
     texte, quelle que soit la largeur. Le retrait est repris par une marge
     négative de même valeur, si bien que pas une lettre ne bouge. */
  margin: -3px -6px;
  padding: 3px 6px;
  background: var(--c-page);

  /* seuls les <br> décident des retours : sans cela le bloc se replie sur
     la largeur disponible et ajoute une ligne */
  width: max-content;
}

.diagram__note--a { left: 15.55%; top: 0;      }
.diagram__note--c { left: 75.31%; top: 26.80%; }
.diagram__note--d { left: 10.52%; top: 83.66%; }

/* ---------- 9. Visuels pleine largeur ---------- */

.shot {
  margin: var(--gap-shot) var(--pad);
}

.shot img {
  width: 100%;
  height: auto;
}

/* l'abribus est calé à droite, comme sur la maquette */
.shot--right {
  margin-left: auto;
  width: calc((100% - var(--pad) * 2) * 0.6423);
}

.duo {
  display: grid;
  grid-template-columns: 67.3% 31.4%;
  gap: 1.5%;
  margin: var(--gap-shot) var(--pad);
}

.duo .shot { margin: 0; }

/* ---------- 9 bis. Le visuel qui se renouvelle ---------- */

/* Composant partagé : la vue de salle de Bella Letteratura, le livret ouvert
   d'Itinéraire dys et le logotype en situation d'AZANDR s'en servent. Tous
   trois alternent quatre visuels ; la variante « --trois » reste disponible
   pour un jeu de trois.

   Les images occupent exactement la même zone. La première reste dans le flux :
   c'est elle qui donne sa hauteur au bloc, la mise en page est donc celle d'une
   image seule. Les autres se superposent en absolu.

   Chacune entre en fondu puis reste opaque jusqu'à ce que la suivante l'ait
   entièrement recouverte ; on l'efface alors d'un coup, à l'abri sous cette
   suivante. Seule la dernière ressort en fondu, pour redécouvrir la première.
   Aucune ne se dissout donc au-dessus d'une image elle-même en train de
   disparaître : il n'y a jamais que deux images en jeu, et le fond reste
   toujours parfaitement opaque. */

.diapo {
  position: relative;
  --diapo-pas: 2s;                                   /* durée d'affichage */
  --diapo-cycle: calc(var(--diapo-pas) * 4);         /* 4 visuels par défaut */
}

.diapo .diapo__suivante {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: diapo var(--diapo-cycle) linear infinite both;
}

/* Les retards se comptent en pas, pour valoir quel que soit le nombre
   d'images ; « :last-of-type » désigne la dernière dans les deux cas. */
.diapo .diapo__suivante:nth-of-type(2) { animation-delay: var(--diapo-pas); }
.diapo .diapo__suivante:nth-of-type(3) { animation-delay: calc(var(--diapo-pas) * 2); }
.diapo .diapo__suivante:nth-of-type(4) { animation-delay: calc(var(--diapo-pas) * 3); }
.diapo .diapo__suivante:last-of-type   { animation-name: diapo-derniere; }

.diapo--trois { --diapo-cycle: calc(var(--diapo-pas) * 3); }
.diapo--trois .diapo__suivante             { animation-name: diapo-3; }
.diapo--trois .diapo__suivante:last-of-type { animation-name: diapo-3-derniere; }

/* Les repères sont en pourcentage du cycle, ils diffèrent donc entre les deux
   jeux : 0,5 s de fondu font 6,25 % de 8 s mais 8,333 % de 6 s.
   Attention : une var() dans animation-timing-function d'une étape de
   @keyframes est ignorée, la courbe est donc écrite en toutes lettres. */

@keyframes diapo {                                   /* cycle de 8 s */
  0%      { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  6.25%   { opacity: 1; }         /* fondu entrant : 0,5 s */
  40%     { opacity: 1; }         /* la suivante la recouvre depuis 2,5 s */
  40.01%  { opacity: 0; }         /* effacée pendant qu'elle est masquée */
  100%    { opacity: 0; }
}

@keyframes diapo-derniere {
  0%      { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  6.25%   { opacity: 1; }
  25%     { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  31.25%  { opacity: 0; }         /* fondu sortant, qui redécouvre la première */
  100%    { opacity: 0; }
}

@keyframes diapo-3 {                                 /* cycle de 6 s */
  0%      { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  8.333%  { opacity: 1; }         /* fondu entrant : 0,5 s */
  53%     { opacity: 1; }         /* recouverte depuis 2,5 s, et la dernière
                                     ne commencera à s'effacer qu'à 66,67 % */
  53.01%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes diapo-3-derniere {
  0%      { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  8.333%  { opacity: 1; }
  33.333% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  41.667% { opacity: 0; }         /* fondu sortant, qui redécouvre la première */
  100%    { opacity: 0; }
}

/* Un défilement automatique est une animation subie : on la coupe pour qui
   demande moins de mouvement, et seul le premier visuel reste affiché. */
@media (prefers-reduced-motion: reduce) {
  .diapo .diapo__suivante { animation: none; }
}

/* ---------- 10. Les affiches sur fond noir ---------- */

.posters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.1%;
  margin-top: var(--sp-md);
  padding: 4.05% 4.4%;
  background: var(--c-black);
}

.posters img {
  width: 100%;
  height: auto;
  min-width: 0;
}

/* ---------- 11. Autres projets ---------- */

.more {
  margin: var(--sp-lg) var(--pad) 0;
}

.more__title {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin: 0 0 clamp(16px, 2vw, 32px);
  font-size: clamp(0.85rem, 1.3vw, 1.3rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.more__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-rule);
}

.more__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2.22%;
}

/* Le lien fait office de cadre et rogne le zoom, comme .pf__shot sur le
   portfolio. Pas besoin d'un cadre supplémentaire ici : rien ne suit l'image
   dans la case, le nom du projet n'existe que pour les lecteurs d'écran. */
.more__grid a {
  display: block;
  overflow: hidden;
}

.more__grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 279 / 280;
  object-fit: cover;
  transition: transform var(--t-zoom) var(--ease);
}

/* Même geste, mêmes réglages que les vignettes du portfolio. Une vignette sans
   lien — Séra, sur la page Azandr — ne bouge donc pas. */
.more__grid a:focus-visible img { transform: scale(var(--zoom)); }

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .more__grid a:hover img { transform: scale(var(--zoom)); }
}

@media (prefers-reduced-motion: reduce) {
  .more__grid a:focus-visible img { transform: none; }

  /* Survol réservé aux appareils à souris : sur un écran tactile un
     appui laisserait l'effet « collé » jusqu'au suivant. */
  @media (hover: hover) and (pointer: fine) {
    .more__grid a:hover img { transform: none; }
  }
}

/* ---------- 12. Pied de page (maquette NEW_FOOTER) ----------
   Le pied de page est une bande noire, seul bloc sombre des pages projet :
   l'appel et son bouton à gauche, les coordonnées puis les savoir-faire à
   droite, et sous un filet la navigation.

   Les valeurs sont relevées sur la maquette, large de 2232 px, et ramenées ici
   en vw : le bloc garde ses proportions d'un écran à l'autre. Le petit texte
   reprend le corps du bandeau — la maquette lui donne 0,99 % de la largeur,
   le bandeau 0,94 %, l'écart ne se voit pas et l'échelle du site reste
   d'un seul tenant. */

.footer {
  display: grid;
  grid-template-columns: 1fr auto;

  /* La bande traverse tout l'écran : les marges latérales sont en retrait
     intérieur, comme le faisait le filet du pied de page précédent. */
  margin: clamp(30px, 3.94vw, 63px) 0 0;
  padding: clamp(20px, 1.6vw, 32px) var(--pad) clamp(22px, 1.57vw, 34px);
  background: var(--c-ink);
  color: #fff;

  /* Le petit texte du pied de page est un cran plus grand que celui du
     bandeau : la maquette lui donne 0,995 % de la largeur, soit 19 px à
     1920. Tout le bloc s'y accroche — les écarts des deux listes, les
     retraits du bouton et l'écartement des mots de la navigation sont
     exprimés en em. */
  font-size: clamp(13px, 0.995vw, 19px);
  line-height: 1.222;   /* 27 px pour 22 sur la maquette */
}

/* le cadre de focus est de l'encre de la page : sur la bande noire il faut
   l'inverser, sans quoi il ne se verrait pas */
.footer :focus-visible { outline-color: #fff; }

/* 12.1 — L'appel */

.footer__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.159vw, 3.8rem);   /* 60,6px @1920 — capitale 43 px */
  line-height: 1.269;   /* 89,5 px pour 70,5 sur la maquette */
  text-transform: uppercase;
}

/* Le lien souligné devient un bouton cerné d'un filet blanc. Le survol le
   remplit : c'est le geste qu'appelle un bouton, et il garde la durée et la
   courbe du filet des liens du bandeau.

   Le bouton de la page contact est le même : ce qui fait son dessin est écrit
   ici une fois pour les deux, seuls son corps et ses retraits lui sont
   propres (section 23). */
.footer__cta,
.ct__cta {
  border: 1px solid #fff;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.68em;
  margin-top: clamp(16px, 1.25vw, 26px);
  padding: 0.49em 0.9em;
}

.footer__cta:focus-visible,
.ct__cta:focus-visible {
  background: #fff;
  color: var(--c-ink);
}

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .footer__cta:hover,
  .ct__cta:hover {
    background: #fff;
    color: var(--c-ink);
  }
}

/* Flèche tracée, et non un caractère : filet d'un pixel comme les autres
   traits de la page, quelle que soit la taille du texte. La diagonale va d'un
   coin à l'autre, la pointe suit les deux bords. */
.footer__cta-arrow {
  width: 0.68em;
  height: 0.68em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* 12.2 — Coordonnées et savoir-faire */

.footer__aside {
  justify-self: end;
  text-align: right;

  /* la maquette pose cette colonne un cran plus bas que le titre : la première
     ligne vient au milieu du premier mot de l'appel, non à son sommet */
  margin-top: clamp(6px, 0.81vw, 17px);
}

.footer__contact { display: grid; }

.footer__contact a:focus-visible { opacity: 0.55; }

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .footer__contact a:hover { opacity: 0.55; }
}

.footer__social { margin-top: 0.59em; }

.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.68em;
}

.footer__social svg {
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.footer__social .dot {
  fill: currentColor;
  stroke: none;
}

/* Les cinq savoir-faire sont des mentions, pas des liens : la maquette les
   écrit en gris et ne les souligne pas. */
.footer__savoir {
  margin-top: 2.79em;
  display: grid;
  gap: 0.41em;
  color: var(--c-gris-pied);
}

/* 12.3 — La navigation, sous son filet */

.footer__nav {
  grid-column: 1 / -1;
  margin-top: clamp(30px, 2.73vw, 56px);
  padding-top: clamp(10px, 0.76vw, 16px);
  border-top: 1px solid var(--c-gris-pied);
  color: var(--c-gris-pied);
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 2.2em;
}

/* Gris au repos, blancs au survol : sur fond noir, éclaircir se lit mieux
   qu'estomper. */
.footer__nav a { transition: color 0.4s var(--ease); }

.footer__nav a:focus-visible { color: #fff; }

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover { color: #fff; }
}

/* ---------- 12 bis. Les retours de ligne écrits dans le texte ----------

   Les <br> des pages projet reproduisent la maquette : ils sont relevés pour
   une colonne de grand écran, et tant qu'elle est assez large chaque segment
   tient sur sa ligne. Dès qu'on resserre la fenêtre, ces segments se replient à
   leur tour et la phrase se retrouve coupée deux fois — une fois où la maquette
   le voulait, une fois là où la place manque, souvent au milieu d'un mot-outil.

   Le seuil a été mesuré page par page : la dernière coupure de ce genre a lieu
   à 1270px, sur CCNN. En dessous de 1275, les retours écrits s'effacent donc et
   le texte se replie tout seul, là où la largeur l'impose. Les annotations des
   logotypes ne sont pas concernées : elles sont composées en max-content et ne
   se replient jamais — leurs <br> les dessinent, et c'est la bascule à 1023px
   qui s'en occupe. */
@media (max-width: 1274px) {
  .row__text br,
  .row__list br { display: none; }
}

/* ---------- 13. Adaptations de la page projet ---------- */

@media (max-width: 1023px) {

  /* Empilé sur deux lignes, le header revient dans le flux et se contente d'y
     rester collé — la couverture ne passe plus dessous. */
  .header--over {
    position: sticky;
    color: var(--c-ink);
  }

  .header--over .lang__list { background: var(--c-page); }

  .cover {
    aspect-ratio: 4 / 3;
    margin: 0 var(--pad);
  }

  .row {
    grid-template-columns: 1fr;
    gap: clamp(10px, 1.6vw, 18px);
  }

  .row--meta {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .diagram {
    aspect-ratio: auto;
    display: grid;
    justify-items: center;
    gap: clamp(20px, 4vw, 40px);
    margin: var(--sp-md) 0;
  }

  .diagram__lines { display: none; }

  .diagram__logo,
  .diagram__note {
    position: static;
    left: auto;
    top: auto;
  }

  .diagram__logo { width: min(320px, 70%); }

  .diagram__note {
    justify-self: start;
    width: auto;
    max-width: 34em;
    text-align: left;   /* l'alignement à droite ne vaut que pour la compo libre */
  }

  .diagram__note br { display: none; }

  .shot--right {
    width: auto;
    margin-left: var(--pad);
  }

  .duo { grid-template-columns: 1fr; gap: var(--gap-shot); }

  .posters { padding: 6% 5%; gap: 4%; }

  /* Dès que la page s'empile, la rangée des autres projets suit le principe du
     téléphone : trois vignettes sur une seule ligne, et les deux dernières
     retirées. Sur tablette elles occupent toute la colonne, donc environ deux
     fois la taille qu'elles ont sur téléphone — le même dessin, à l'échelle du
     format. */
  .more__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.75%;
  }

  .more__grid li:nth-child(n + 4) { display: none; }

}

@media (max-width: 599px) {
  .cover { aspect-ratio: 3 / 4; }
  .posters { grid-template-columns: 1fr; gap: 6%; }
}

/* ---------- 14. Page projet « Visible, Invisible » (maquette p.7) ----------
   Même charpente que la page précédente ; seuls diffèrent la couverture,
   dont le titre est en noir sur fond clair, et deux rythmes verticaux. */

.header--ink { color: var(--c-ink); }
.header--ink .lang__list { background: var(--c-page); }

.cover__title--ink { color: var(--c-ink); }

/* couverture p.7 : le titre tient sur une seule ligne */
.cover__title--ink {
  bottom: 3.3%;
  font-size: clamp(1.6rem, 3.75vw, 4rem);
  letter-spacing: 0.04em;
}

/* visuel suivi d'un bloc de texte : plus d'air qu'entre deux visuels */
.shot--large { margin-top: clamp(26px, 3.44vw, 55px); }

.row--free {
  grid-template-columns: 29.9% minmax(0, 59.1%);
  margin-top: clamp(14px, 1.87vw, 30px);
}

.row--free .row__text { grid-column: 2; }

/* l'appel aux autres projets respire davantage sur cette page */
.duo--vi + .more { margin-top: clamp(66px, 9.13vw, 146px); }

.duo--vi {
  grid-template-columns: 50.1% 48.2%;
  gap: 1.7%;
  margin-top: clamp(26px, 3.5vw, 56px);
}

@media (max-width: 1023px) {
  .cover__title--ink { font-size: clamp(1.4rem, 6vw, 3rem); }

  .row--free { grid-template-columns: 1fr; }
  .row--free .row__text { grid-column: 1; }

  .duo--vi { grid-template-columns: 1fr; gap: var(--gap-shot); }
}

/* ---------- 15. Page projet « Localocavore » (maquette p.9) ---------- */

/* couverture : deux lignes, le mot « Festival » au-dessus et plus petit */
.cover__title--loca,
.cover__title--dc { bottom: 3.19%; letter-spacing: 0.031em; }
.cover__title--loca .cover__line--sup,
.cover__title--dc .cover__line--sup {
  display: block;
  font-size: 0.45em;             /* capitale 22px pour 48px */
  letter-spacing: 0.02em;
}

/* le logotype tient plus de place et s'accompagne d'une carte */
.diagram--loca {
  /* le bloc annoté est plus étroit que la colonne : x120→1474 sur 36→1563 */
  width: 88.7%;
  margin-inline: auto;
  aspect-ratio: 1355 / 577;
  margin: clamp(60px, 11.7vw, 188px) 0 clamp(50px, 7.2vw, 115px);
}

.diagram__logo--loca {
  left: 50%;
  top: 0;
  width: 36%;
  transform: translateX(-50%);
}

.diagram__carte {
  position: absolute;
  left: 75.8%;
  top: 47.8%;
  width: 22.2%;
  height: auto;
  border-radius: 50%;
}

/* Les deux notes de gauche sont alignées à droite, leur bord fuyant tourné
   vers l'extérieur et leur bord net vers le logo, dont elles se rapprochent. */
.diagram__note--lh { right: 72%; left: auto; top: 1.4%; }
.diagram__note--lb { right: 72%; left: auto; top: 57%;  }
.diagram__note--ld { left: 80.4%; top: 3.8%; }

/* listes à puces du corps de texte */
.row__list {
  margin: 1.35em 0;
  padding: 0;
  list-style: none;
}

.row__list li {
  position: relative;
  padding-left: 1.35em;
}

.row__list li + li { margin-top: 0.1em; }

.row__list li::before {
  content: "•";
  position: absolute;
  left: 0.35em;
}

.row__list strong { font-weight: 600; }

/* les quatre plantes : positions libres relevées sur la maquette */
.plantes {
  position: relative;
  aspect-ratio: 1527 / 351;
  margin-top: clamp(30px, 4.4vw, 70px);
}

.plante {
  position: absolute;
  bottom: 0;
  margin: 0;
  text-align: center;
}

.plante img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.plante figcaption {
  margin-top: clamp(10px, 1.4vw, 22px);
  font-size: var(--fs-tag);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.plante--1 { left:  1.0%; width: 18.7%; }
.plante--2 { left: 28.9%; width: 10.9%; }
.plante--3 { left: 48.5%; width: 24.2%; }
.plante--4 { left: 83.9%; width: 16.2%; }

/* visuels de cette page */
.shot--loca1 { margin-top: clamp(50px, 7.2vw, 115px); }

/* La grande vue du festival se relaie avec trois autres. Le jeu compte quatre
   temps mais cinq enfants — le dernier est le logotype — si bien que la règle
   commune, qui donne le fondu sortant au dernier élément de son type, ne
   désigne plus la dernière photographie : les rangs sont donc écrits ici. */
.shot--loca1 .diapo__suivante:nth-child(2) { animation-delay: var(--diapo-pas); }
.shot--loca1 .diapo__suivante:nth-child(3) { animation-delay: calc(var(--diapo-pas) * 2); }

.shot--loca1 .diapo__suivante:nth-child(4) {
  animation-name: diapo-derniere;
  animation-delay: calc(var(--diapo-pas) * 3);
}

/* Le logotype est celui de la première vue, découpé dans le fichier et reposé
   au pixel près : il ne se montre donc que sur les trois autres, et le voile
   qui le détache de leur lumière suit la même horloge. */
.shot--loca1 .shot__logo {
  position: absolute;
  left:  32.292%;
  top:   34.526%;
  width: 35.575%;
  height: auto;
  z-index: 2;
  animation: loca-logo var(--diapo-cycle) linear infinite both;
}

/* Deux ombres plutôt qu'une : un voile léger sur toute la vue, et un halo
   creusé juste derrière le logotype — ces trois photographies sont bien plus
   claires que la première, et le logotype — dont le O est dessiné en fines
   lignes moirées — s'y perdait. Le halo suffit à le porter sans éteindre le
   reste de l'image. */
.shot--loca1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 35%);
  animation: loca-logo var(--diapo-cycle) linear infinite both;
}

.shot--loca1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 34% 30% at 50% 50%,
                              rgb(0 0 0 / 52%) 0%, rgb(0 0 0 / 0) 78%);
  animation: loca-logo var(--diapo-cycle) linear infinite both;
}

@keyframes loca-logo {                               /* cycle de 8 s */
  0%      { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  6.25%   { opacity: 0; }         /* s'efface avec la dernière vue */
  25%     { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  31.25%  { opacity: 1; }         /* revient avec la deuxième */
  100%    { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .shot--loca1 .shot__logo,
  .shot--loca1::after,
  .shot--loca1::before { animation: none; opacity: 0; }
}
.shot--loca2 {
  margin-left: auto;
  width: calc((100% - var(--pad) * 2) * 0.7);
  margin-top: clamp(30px, 4.3vw, 69px);
}
.shot--loca3 { margin-top: clamp(30px, 5vw, 81px); }

.row--loca3 { margin-top: clamp(18px, 2.6vw, 41px); }

.duo--loca,
.duo--loca2 { margin-top: clamp(30px, 4.8vw, 77px); }

/* Les deux cadres du dépliant ne sont pas de la même largeur sur la maquette :
   le dépliant ouvert prend 996 points pour 811 au dépliant fermé, avec 25
   points de gouttière — soit les trois valeurs ci-dessous rapportées à la
   colonne. Les deux photographies ayant le rapport de leur cadre, elles
   arrivent exactement à la même hauteur. */
.duo--loca  { grid-template-columns: 44.27% 54.37%; gap: 1.36%; }

.duo--loca2 { gap: 1.5%; grid-template-columns: 48.7% 43.7%; align-items: center; }

/* La case centrale de la grille Instagram est un post blanc : le logotype animé
   vient s'y loger. Les repères sont relevés sur loca-grille-ig.jpg (1100 px de
   côté) : la case s'ouvre à 364,5 px et se referme à 734,5 px, sur les deux axes
   — d'où 33,14 % de décalage et 33,64 % de côté. La vidéo est carrée comme la
   case, elle la remplit donc au pixel près. Son fond est blanc du début à la fin,
   ce qui rend la jointure avec le post invisible, et c'est aussi ce post blanc
   que l'on voit tant que la vidéo n'est pas chargée. */
.shot--loca-ig { position: relative; }

.loca-ig__anim {
  position: absolute;
  left: 33.14%;
  top: 33.14%;
  width: 33.64%;
  height: 33.64%;
  background: #fff;   /* même blanc que le post, avant la première image */
}

@media (max-width: 1023px) {
  .diagram--loca {
    aspect-ratio: auto;
    display: grid;
    justify-items: center;
    gap: clamp(20px, 4vw, 40px);
    margin: var(--sp-md) 0;
  }

  .diagram__logo--loca,
  .diagram__carte {
    position: static;
    left: auto;
    top: auto;
    /* le logotype est centré par une translation d'une demi-largeur sur grand
       écran : empilé, elle le faisait sortir par la gauche */
    transform: none;
  }

  .diagram__logo--loca { width: min(420px, 85%); }
  .diagram__carte      { width: min(220px, 45%); }

  .plantes {
    position: static;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: end;
    gap: clamp(24px, 5vw, 48px);
  }

  .plante {
    position: static;
    left: auto;
    width: auto;
  }

  .plante img { max-width: 70%; }
  .plante figcaption { white-space: normal; }

  .shot--loca2 { width: auto; margin-left: var(--pad); }

  .duo--loca,
  .duo--loca2 { grid-template-columns: 1fr; gap: var(--gap-shot); }
}

/* 15 bis — Le logotype annoté sur tablette et petit écran

   Il garde la composition du grand écran, réduite : même largeur de bloc, même
   logotype centré, même carte, mêmes repères en pourcentage, mêmes quatre
   traits d'appel. Tout étant écrit en pourcentage du cadre, tout suit.

   Une chose ne suit pas : le texte des annotations, qui garde sa taille en
   pixels. À largeur de cadre réduite, les deux annotations de gauche — ancrées
   par leur bord droit — débordent alors par la gauche : 47px hors de la page à
   660, 15px à 768. Leur corps est donc rendu proportionnel au cadre le temps de
   cette bande, jusqu'à retrouver celui de la page vers 1000px. C'est le prix de
   la fidélité à la composition ; l'autre solution aurait été de déplacer les
   annotations, donc de changer le dessin.

   La bande va de 600px — où le montage téléphone prend le relais — à 1023. Le
   corps y descend jusqu'à 8,2px au plus bas : c'est le prix à payer pour garder
   la composition entière plutôt que de l'empiler. */
@media (min-width: 600px) and (max-width: 1023px) {
  .diagram--loca {
    display: block;
    position: relative;
    width: 88.7%;
    margin: clamp(60px, 11.7vw, 188px) 0 clamp(50px, 7.2vw, 115px);
    aspect-ratio: 1355 / 577;
  }

  .diagram--loca .diagram__lines      { display: block; }
  .diagram--loca .diagram__lines--tel { display: none; }

  .diagram--loca .diagram__logo,
  .diagram--loca .diagram__carte,
  .diagram--loca .diagram__note { position: absolute; }

  .diagram--loca .diagram__note {
    width: max-content;
    max-width: none;
    font-size: min(0.85rem, 1.36vw);
  }

  .diagram--loca .diagram__note br { display: revert; }

  .diagram--loca .diagram__logo--loca {
    left: 50%;
    top: 0;
    width: 36%;
    transform: translateX(-50%);
  }

  .diagram--loca .diagram__carte { left: 75.8%; top: 47.8%; width: 22.2%; }

  .diagram--loca .diagram__note--lh { right: 72%;   left: auto; top:  1.4%; }
  .diagram--loca .diagram__note--lb { right: 72%;   left: auto; top: 57%;   }
  .diagram--loca .diagram__note--ld { left:  80.4%;             top:  3.8%; }
}


/* ---------- 16. Page projet « Dans’&Co » (maquette p.13) ---------- */

/* Filet de séparation seul, sans rangée de texte */
.rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-rule);
}

/* 16.1 — Le logotype annoté : le mot, sa bulle et ses deux filets sont
   dans l'image ; seul le trait qui descend vers la note du bas est tracé. */
.diagram--dc1 {
  width: 69.29%;
  margin: clamp(86px, 10.7vw, 171px) 0 0 14.28%;
  aspect-ratio: 1270 / 586;
}

.diagram__logo--dc {
  left: 1.18%;
  top: 2.39%;
  width: 97.8%;
}

/* la bulle qui entoure l'apostrophe et l'esperluette passe sous le mot */
/* Le demi-arc sous l'esperluette, tracé comme un chemin depuis qu'il n'est plus
   une ellipse entière. Même gris, même épaisseur que les filets droits. */
.diagram--dc1 .diagram__lines path {
  fill: none;
  stroke: #cfcfcf;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* les trois notes sont centrées sous leur trait d'appel */
.diagram__note--dc {
  transform: translateX(-50%);
  text-align: center;
}

.diagram__note--d1a { left: 24.25%; top: 65.53%; }
.diagram__note--d1b { left: 86.93%; top: 65.53%; }
.diagram__note--d1c { left: 63.31%; top: 96.59%; }

.rule--dc { margin-top: clamp(56px, 11.04vw, 177px); }

/* 16.2 — Le symbole annoté, ses deux traits d'appel compris dans l'image */
.diagram--dc2 {
  width: 78.34%;
  margin: clamp(18px, 2.08vw, 33px) 0 0 9.43%;
  aspect-ratio: 1436 / 982;
}

.diagram__symbole,
.diagram__esperluette {
  position: absolute;
  height: auto;
}

.diagram__symbole     { left: 30.64%; top: 0.2%;   width: 40.11%; }
.diagram__esperluette { left: 74.51%; top: 62.93%; width: 25.63%; }

.diagram__note--d2a { left: 0;      top: 13.24%; }
.diagram__note--d2b { left: 78.62%; top: 34.01%; }

/* 16.3 — Gamme chromatique : trois carrés calés sur la colonne de texte */
.swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.96%;
  margin-top: clamp(28px, 3.44vw, 55px);
}

.swatches img {
  width: 100%;
  height: auto;
}

/* 16.4 — Visuels de cette page */
.shot--dc1 { margin-top: clamp(40px, 4.95vw, 79px); }

/* La grande photographie se relaie avec deux autres scènes de danse. Le jeu
   compte trois temps mais cinq enfants — la première vue est dans un <picture>,
   les deux derniers sont des logotypes — si bien que les rangs par type
   d'élément, sur lesquels reposent les règles communes, ne désignent plus rien
   ici : retards et noms sont donc écrits par rang d'enfant. */
.shot--dc1 .diapo__suivante:nth-child(2) {
  animation-name: diapo-3;
  animation-delay: var(--diapo-pas);
}

.shot--dc1 .diapo__suivante:nth-child(3) {
  animation-name: diapo-3-derniere;
  animation-delay: calc(var(--diapo-pas) * 2);
}

/* Le logotype ne bouge pas d'un temps à l'autre, et ne clignote pas non plus :
   il est posé une fois pour toutes, par-dessus tout le reste, et n'a aucune
   animation. C'est le même dessin que celui de la première vue — découpé de
   cette photographie et reposé au pixel près, superposition vérifiée — si bien
   qu'on ne voit pas où l'un s'arrête et où l'autre commence. Les photographies
   se relaient dessous, le voile monte et descend sous lui : le mot, lui, ne
   bouge pas d'un cheveu. */
.shot--dc1 .shot__logo {
  position: absolute;
  left:  38.932%;
  top:   30.657%;
  width: 22.080%;
  height: auto;
  z-index: 1;
}

/* La version téléphone de la photographie porte un autre logotype — le symbole
   seul, plus grand, dans un cadre debout : elle a donc sa propre découpe, calée
   sur son propre cadre. Elle est en blanc, comme sur grand écran, et non dans le
   doré du fichier : découpée un pixel plus large que le dessin d'origine, elle
   le recouvre entièrement, sans en laisser dépasser de cerne. */
.shot--dc1 .shot__logo--dc-tel { display: none; }

.shot--dc1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 40%);
  animation: dc-logo var(--diapo-cycle) linear infinite both;
}

/* Le voile, lui, ne se montre que sur les deux photographies ajoutées : la
   première a sa propre lumière, il n'y a pas lieu de l'assombrir. */
@keyframes dc-logo {                                 /* cycle de 6 s */
  0%      { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  8.333%  { opacity: 0; }         /* s'efface avec la dernière vue */
  33.333% { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  41.667% { opacity: 1; }         /* revient avec la deuxième */
  100%    { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .shot--dc1::after { animation: none; opacity: 0; }
}

/* la maquette du site est centrée et un peu plus étroite que la colonne */
.shot--dc-web {
  position: relative;
  width: 88.11%;
  margin: clamp(48px, 6.09vw, 98px) auto 0;
}

/* Le fichier porte ses propres marges blanches : une ombre posée sur son cadre
   flotterait à 144 px de la maquette, en plein vide. On calque donc un
   rectangle vide exactement sur la page — mêmes bords, même arrondi — dont
   seule l'ombre se voit : une ombre externe est peinte hors de sa boîte, si
   bien que l'intérieur reste intact et que la maquette s'affiche au travers.

   Les pourcentages viennent du fichier : la page y occupe les colonnes 289 à
   2411 sur 2700, et les lignes 3 à 4347 sur 4349.

   En haut, la silhouette n'est pas celle de la page mais celle de la coque de
   l'ordinateur, plus large de 17 colonnes et terminée par un large quart de
   rond. Le rectangle d'ombre, resté d'équerre, dépassait donc la courbe : ses
   deux angles découpaient dans le blanc du fichier un petit carré que l'ombre
   entourait de deux traits nets. On lui donne l'arrondi qui manquait, soit
   78 colonnes du fichier — le rayon de la coque moins les 17 dont le
   rectangle est en retrait, ce qui laisse le contour de l'ombre parallèle au
   bord de la coque. Le second terme rapporte le même rayon à la hauteur, pour
   que l'arc reste circulaire. Le bas du fichier est coupé net : ses deux
   angles gardent leur équerre. */
.shot--dc-web::after {
  content: "";
  position: absolute;
  left: 10.704%;
  top: 0.069%;
  width: 78.630%;
  height: 99.908%;
  border-radius: 3.674% 3.674% 0 0 / 1.795% 1.795% 0 0;
  /* l'ombre suit la largeur du bloc : sous une maquette de 238 px sur
     téléphone, un flou de 28 px pèserait beaucoup trop. */
  box-shadow: 0 clamp(3px, 0.38vw, 7px) clamp(14px, 1.75vw, 33px) rgb(0 0 0 / 11%);
  pointer-events: none;
}

.shot--dc-formules { margin-top: clamp(56px, 6.93vw, 111px); }

/* le tableau social media reprend le même écart : les trois grands visuels de
   fin de page — le site, les formules, le compte Instagram — se suivent au
   même rythme. Le fichier est détouré sur du blanc pur, comme la page : il n'a
   donc pas besoin de cadre. */
.shot--dc-social { margin-top: clamp(56px, 6.93vw, 111px); }

/* les deux supports sont calés à droite, le pochon plus petit que l'oriflamme */
.duo--dc {
  grid-template-columns: 29.4% 40.53%;
  justify-content: end;
  align-items: start;
  gap: 0.93%;
  margin-top: clamp(20px, 2.34vw, 38px);
}

@media (max-width: 1023px) {
  .diagram--dc1,
  .diagram--dc2 {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .diagram__logo--dc { width: min(520px, 100%); }

  .diagram__symbole,
  .diagram__esperluette {
    position: static;
    left: auto;
    top: auto;
  }

  .diagram__symbole     { width: min(210px, 45%); }
  .diagram__esperluette { width: min(160px, 32%); }

  .diagram__note--dc {
    transform: none;
    text-align: left;
  }

  .shot--dc-web { width: auto; margin-inline: var(--pad); }

  .duo--dc { grid-template-columns: 1fr; gap: var(--gap-shot); }

  /* Sur tablette les deux supports restent côte à côte, dans les proportions du
     grand écran — le pochon un peu plus étroit que l'oriflamme, alignés par le
     haut. La seule différence : ils occupent toute la largeur de la colonne au
     lieu d'être calés à droite. Le rapport 29,4 / 40,53 de la maquette est
     conservé, rapporté à cent. Sous 600px ils s'empilent, comme aujourd'hui. */
  @media (min-width: 600px) {
    .duo--dc {
      grid-template-columns: 41.49% 57.20%;
      gap: 1.31%;
    }
  }
}

/* 16.4 — Les deux logotypes annotés sur tablette

   Ils gardent la composition du grand écran, réduite : mêmes largeurs de cadre,
   mêmes marges, mêmes repères en pourcentage, mêmes traits d'appel. Rien n'est
   recalculé — tout est en pourcentage du cadre, donc tout suit.

   Le seuil est à 660px et non à 600, et c'est mesuré : les annotations sont
   composées sur la largeur de leur texte, qui ne rétrécit pas avec le cadre.
   En dessous de 660, « La tête de la danseuse : » vient buter dans le symbole —
   4,2px de recouvrement à 600px, dégagé de 5,4px à 640 et de 10,2 à 660. Sous
   ce seuil, les deux blocs continuent de s'empiler comme aujourd'hui. */
@media (min-width: 660px) and (max-width: 1023px) {

  /* --- Le logotype --- */
  .diagram--dc1 {
    display: block;
    position: relative;
    width: 69.29%;
    margin: clamp(86px, 10.7vw, 171px) 0 0 14.28%;
    aspect-ratio: 1270 / 586;
  }

  .diagram--dc1 .diagram__lines      { display: block; }
  .diagram--dc1 .diagram__lines--tel { display: none; }

  .diagram--dc1 .diagram__logo,
  .diagram--dc1 .diagram__note { position: absolute; }

  .diagram--dc1 .diagram__note {
    width: max-content;
    max-width: none;
  }

  .diagram--dc1 .diagram__note br { display: revert; }

  .diagram--dc1 .diagram__logo--dc { left: 1.18%; top: 2.39%; width: 97.8%; }

  /* les trois notes sont centrées sous leur trait d'appel, comme au-dessus */
  .diagram--dc1 .diagram__note--dc {
    transform: translateX(-50%);
    text-align: center;
  }

  .diagram--dc1 .diagram__note--d1a { left: 24.25%; top: 65.53%; }
  .diagram--dc1 .diagram__note--d1b { left: 86.93%; top: 65.53%; }
  .diagram--dc1 .diagram__note--d1c { left: 63.31%; top: 96.59%; }

  /* --- Le symbole --- */
  .diagram--dc2 {
    display: block;
    position: relative;
    width: 78.34%;
    margin: clamp(18px, 2.08vw, 33px) 0 0 9.43%;
    aspect-ratio: 1436 / 982;
  }

  .diagram--dc2 .diagram__lines      { display: block; }
  .diagram--dc2 .diagram__lines--tel { display: none; }

  .diagram--dc2 .diagram__note,
  .diagram--dc2 .diagram__symbole,
  .diagram--dc2 .diagram__esperluette { position: absolute; }

  .diagram--dc2 .diagram__note {
    width: max-content;
    max-width: none;
    text-align: left;
  }

  .diagram--dc2 .diagram__note br { display: revert; }

  .diagram--dc2 .diagram__symbole     { left: 30.64%; top:  0.2%;   width: 40.11%; }
  .diagram--dc2 .diagram__esperluette { left: 74.51%; top: 62.93%;  width: 25.63%; }

  .diagram--dc2 .diagram__note--d2a { left: 0;       top: 13.24%; }
  .diagram--dc2 .diagram__note--d2b { left: 78.62%;  top: 34.01%; }
}

/* ---------- 17. Page projet « Itinéraire dys » (maquette p.11) ----------
   Deux différences de fond avec les pages précédentes : la couverture n'est
   pas une photo mais un aplat orange sur lequel repose la citation, et le
   texte courant y respire davantage (interligne 1,5 au lieu de 1,35). */

:root { --c-dys: #ff6927; }

.cover--dys {
  aspect-ratio: 1920 / 1007;
  background: var(--c-dys);
}

/* la citation est posée sur l'aplat, jamais rognée : elle suit la largeur
   de la couverture plutôt que d'être recadrée comme une photo */
.cover__art {
  position: absolute;
  left: 0;
  top: 32.27%;
  width: 100%;
  height: auto;
}

.cover__title--dys {
  bottom: 3.78%;
  font-size: clamp(1.6rem, 4vw, 4.25rem);       /* capitale 46px @1600 */
  letter-spacing: 0;
}

.cover__title--dys .cover__line--sub {
  font-size: 0.44em;
  line-height: 1.05;
}

/* l'interligne courant de la page */
.row--dys .row__text { line-height: 1.5; }

.row__question { font-style: italic; }

/* ---- le logotype annoté ---- */

.diagram--dys {
  width: 82.84%;
  margin: clamp(84px, 10.59vw, 169px) 0 0 7.27%;
  aspect-ratio: 1516 / 644;
}

.diagram__logo--dys {
  left: 26.91%;
  top: 22.33%;
  width: 46.9%;
}

.diagram__note--dys1 { left: 0;      top: 0;      }
.diagram__note--dys2 { left: 2.77%;  top: 80.84%; }
.diagram__note--dys3 { left: 76.72%; top: 80.84%; }

/* ---- le logotype en réserve sur l'aplat ---- */

.band--dys {
  position: relative;
  margin-top: clamp(56px, 7.16vw, 114px);
  aspect-ratio: 1830 / 979;
  background: var(--c-dys);
}

/* Le troisième temps est une plage noire : elle n'a pas de fichier, c'est le
   bloc lui-même qui la porte. */
.band__noir { background: var(--c-ink); }

/* Le jeu compte quatre temps, dont un qui n'est pas une image : les retards ne
   peuvent donc plus se compter par type d'élément. Ils sont écrits ici par rang,
   et le dernier prend le fondu sortant qui redécouvre l'aplat. */
/* « :not(:last-child) » et non le seul nom de classe : la plage noire est le
   dernier élément de son type — un div parmi des img — et la règle commune,
   qui vise le dernier de chaque type, lui donnait sinon le fondu sortant du
   dernier temps. Elle se serait effacée sous la dernière photographie, laissant
   l'orange reparaître un instant entre les deux. */
.band--dys .diapo__suivante:not(:last-child) { animation-name: diapo; }
.band--dys .diapo__suivante:last-child       { animation-name: diapo-derniere; }

.band--dys .diapo__suivante:nth-child(2) { animation-delay: var(--diapo-pas); }
.band--dys .diapo__suivante:nth-child(3) { animation-delay: calc(var(--diapo-pas) * 2); }
.band--dys .diapo__suivante:nth-child(4) { animation-delay: calc(var(--diapo-pas) * 3); }

/* Un voile noir se pose sur les deux photographies, sous le logotype : leur
   bois clair avalait le blanc. Il arrive avec la première vue et ne repart
   qu'avec la seconde — entre les deux il couvre la plage noire, où il ne se
   voit pas. L'aplat orange, lui, n'est jamais assombri. */
.band--dys::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 45%);
  animation: band-voile var(--diapo-cycle) linear infinite both;
  animation-delay: var(--diapo-pas);
}

@keyframes band-voile {
  0%      { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  6.25%   { opacity: 1; }         /* fondu entrant, avec la première vue */
  75%     { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  81.25%  { opacity: 0; }         /* fondu sortant, avec la seconde */
  100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .band--dys::after { animation: none; }
}

.band__logo {
  position: absolute;
  left: 32.24%;
  top: 35.55%;
  width: 35.52%;
  height: auto;
  /* Le logotype reste au-dessus des deux vues d'atelier qui viennent recouvrir
     l'aplat : il est écrit avant elles dans la page, ce rang le remet devant. */
  z-index: 1;
}

/* ---- rythme vertical propre à cette page ---- */

.row--dys-pb   { margin-top: clamp(11px, 1.41vw, 23px); }
.row--dys-camp { margin-top: clamp(13px, 1.67vw, 27px); }
.row--dys-c1,
.row--dys-c2   { margin-top: clamp(11px, 1.43vw, 23px); }

.shot--dys-bois { margin-top: clamp(27px, 3.42vw, 55px); }

/* le livret et les goodies sont calés à droite */
.shot--dys-right {
  margin-left: auto;
  width: calc((100% - var(--pad) * 2) * 0.7008);
}

.shot--dys-osb { margin-top: clamp(13px, 1.60vw, 26px); }

/* les trois photos de chantier, de largeurs inégales */
.trio--dys {
  display: grid;
  grid-template-columns: 27.92% 30.6% 39.13%;
  gap: 1.15%;
  margin: clamp(34px, 4.36vw, 70px) var(--pad) 0;
}

.trio--dys .shot { margin: 0; }

.shot--dys-posts { margin-top: clamp(30px, 3.80vw, 61px); }

/* ---- le ruban des publications ----

   Le montage d'origine était une image : trois cartes posées sur un fond
   sombre, la première à 158 px du bord d'un fichier large de 2000. Le ruban
   reprend ces mesures exactement — carte à 25,31 % de la largeur du bandeau,
   écart entre deux cartes à 15,98 % de la carte, respiration au-dessus et en
   dessous à 21,17 % de la carte, même fond. Tout se déduit d'une seule valeur,
   --carte : il suffit de la changer pour les petits écrans, le reste suit.

   Le défilement ne saute pas parce que la série est écrite deux fois dans la
   page et que la course vaut exactement une série — onze cartes et onze
   écarts. Comme la moitié de la piste ne compte que dix écarts et demi, il faut
   ajouter la moitié d'un écart à la translation ; sans ce demi-écart, la boucle
   avance d'un cran à chaque tour. */
.shot--dys-posts { container-type: inline-size; }

.ruban {
  --carte: 25.31cqw;
  --ecart: calc(var(--carte) * 0.1598);
  overflow: hidden;
  padding: calc(var(--carte) * 0.2117) 0;
  background: #232323;
}

.ruban__piste {
  display: flex;
  width: max-content;
  gap: var(--ecart);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: ruban-defile 72s linear infinite;
}

.ruban__piste > li { flex: 0 0 var(--carte); }

.ruban__piste img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 757;
  /* les coins des cartes sont adoucis, proportionnellement à leur largeur :
     sept pixels et demi sur un grand écran, quatre sur un téléphone */
  border-radius: calc(var(--carte) * 0.022);
}

@keyframes ruban-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--ecart) / 2), 0, 0); }
}

/* Le ruban s'arrête sous le pointeur et pendant qu'on le parcourt au clavier :
   on peut alors lire une publication sans la voir filer. */
.ruban:focus-within .ruban__piste { animation-play-state: paused; }

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .ruban:hover .ruban__piste { animation-play-state: paused; }
}

/* Sans animation, le ruban devient une bande qu'on fait défiler soi-même. */
@media (prefers-reduced-motion: reduce) {
  .ruban { overflow-x: auto; }
  .ruban__piste { animation: none; }
}

.shot--dys-insta {
  margin-top: clamp(14px, 1.82vw, 29px);
  margin-left: auto;
  width: calc((100% - var(--pad) * 2) * 0.5038);
}

.shot--dys-linkedin { margin-top: clamp(16px, 2.08vw, 33px); }

.more--dys { margin-top: clamp(30px, 3.83vw, 61px); }

/* ---- adaptations ---- */

@media (max-width: 1023px) {

  .cover--dys { aspect-ratio: 4 / 3; }

  .cover__art {
    top: 50%;
    transform: translateY(-50%);
  }

  /* --- Le logotype annoté ---
     Ici la composition libre est gardée : les annotations restent à leur place
     autour du logotype et les traits gris continuent de les relier, au lieu de
     s'empiler comme sur les autres pages projet. C'est le montage du second
     tracé qui sert — celui du téléphone, relevé dans un cadre de 324 × 351 —
     et non celui du grand écran : les trois annotations du dessin large
     demandent près de mille pixels pour tenir côte à côte, la troisième sortant
     de la page en dessous. */
  .diagram--dys {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 324 / 351;
    margin: clamp(29.1px, 8.103vw, 48.5px) 0 0;
    line-height: 1.2;
  }

  .diagram--dys .diagram__lines      { display: none; }
  .diagram--dys .diagram__lines--tel { display: block; }

  .diagram--dys .diagram__logo,
  .diagram--dys .diagram__note {
    position: absolute;
    right: auto;
    left: auto;
    top: auto;
  }

  .diagram--dys .diagram__note { max-width: none; text-align: left; }

  .diagram--dys .diagram__logo--dys {
    left: 12.02%;
    top: 37.91%;
    width: 76.05%;
  }

  /* Les largeurs décident du nombre de lignes : quatre, six et six sur le
     dessin. */
  .diagram--dys .diagram__note--dys1 { left:  0.43%; top: 11.18%; width: 34%; }
  .diagram--dys .diagram__note--dys3 { left: 59.07%; top:     0%; width: 40%; }
  .diagram--dys .diagram__note--dys2 { left:  9.38%; top: 79.20%; width: 59%; }

  /* Le trait de la troisième annotation existe en deux longueurs. Sous 330px,
     le texte des annotations touche son plancher de dix pixels et cesse de se
     resserrer : la troisième passe alors de six lignes à sept et descend de
     dix-huit unités. Le tracé long viendrait sur le texte ; c'est le court,
     qui part plus bas, qui prend le relais. */
  .diagram--dys .trait--dys3-court,
  .diagram--dys .trait--dys1-tab,
  .diagram--dys .trait--dys3-tab { display: none; }

  @media (max-width: 329px) {
    .diagram--dys .trait--dys3       { display: none; }
    .diagram--dys .trait--dys3-court { display: inline; }
  }

  /* --- Le montage sur tablette ---
     Le cadre est arrêté à 640px et centré, si bien que le logotype — qui tient
     le milieu du cadre — tombe au milieu de la page.

     Le texte des annotations garde le corps de la page. C'est ce qui oblige à
     reprendre deux choses. D'abord les colonnes : exprimées en pourcentage,
     elles se resserreraient avec le cadre et le nombre de lignes changerait à
     chaque largeur ; fixées en pixels, les trois annotations gardent leurs
     trois, quatre et quatre lignes de 600 à 1023px. Ensuite les traits : les
     annotations étant plus courtes que sur téléphone, leurs points de départ
     remontent — c'est le rôle des tracés « -tab ».

     La troisième annotation descend de vingt-quatre unités : elle laissait un
     grand vide au-dessus du logotype. Elle retrouve ainsi le rythme de la
     première — soixante-neuf unités entre le bas du texte et le haut du
     logotype d'un côté, soixante-seize de l'autre — et son trait suit, réglé
     sur le même écart de neuf unités sous le texte.

     Elle est accrochée par la droite : ainsi elle ne sort jamais du cadre,
     même à 600px où celui-ci ne fait plus que 564. */
  @media (min-width: 600px) {
    .diagram--dys {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }

    .diagram--dys .diagram__note--dys1 { width: 218px; }
    .diagram--dys .diagram__note--dys3 { left: auto; right: 0.93%; top: 6.84%; width: 256px; }
    .diagram--dys .diagram__note--dys2 { width: 378px; }

    .diagram--dys .trait--dys1,
    .diagram--dys .trait--dys3       { display: none; }

    .diagram--dys .trait--dys1-tab,
    .diagram--dys .trait--dys3-tab   { display: inline; }
  }

  /* L'aplat reprend le format du grand écran au lieu de se réduire à la hauteur
     de son logotype : il passait de 732 × 272 à 732 × 392 sur une tablette de
     768 px, soit près de la moitié de hauteur en plus. Le logotype, lui, ne
     rétrécit pas — il garde sa taille actuelle tant qu'elle dépasse la part
     qu'il occupe sur grand écran, et la rejoint sur les grandes tablettes. */
  .band--dys {
    aspect-ratio: 1830 / 979;
    padding: 0;
  }

  .band__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(min(320px, 60%), 35.52%);
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .shot--dys-right,
  .shot--dys-insta {
    width: auto;
    margin-left: var(--pad);
  }

  /* Les trois photos de chantier restent côte à côte : elles gardent les
     largeurs inégales du grand écran, qui leur donnent la même hauteur. Elles
     ne se réorganisent qu'en dessous de 600px, où la maquette téléphone en met
     deux en haut et la troisième sous elles. */

  /* Le ruban des publications garde ses proportions, mais ses cartes grandissent :
     à 25 % de la largeur elles deviendraient illisibles sur un petit écran. Deux
     et demie tiennent dans le bandeau au lieu de trois et demie. */
  .ruban { --carte: 34cqw; }
}

@media (max-width: 599px) {
  .cover--dys { aspect-ratio: 3 / 4; }
}

/* =========================================================
   PAGE PROJET  (maquette p.5 — CCNN, saison 2026–2027)
   ========================================================= */

/* La couverture garde la boîte commune : la maquette pose la même
   proportion. Seul le titre change d'échelle, la ligne d'accompagnement
   étant ici une parenthèse et non un sur-titre. */
.cover__title--ccnn {
  bottom: 3.30%;
  font-size: clamp(1.7rem, 3.8475vw, 4.62rem);   /* capitale 45px @1600 */
  line-height: 1.079;   /* la parenthèse est posée nettement plus bas */
}

.cover__title--ccnn .cover__line--sub {
  font-size: 0.4074em;   /* capitale 18,3px pour 45px */
  line-height: 1.38;
}

/* Deux visuels sont calés à droite, sur la colonne de texte */
.shot--ccn-right {
  margin-left: auto;
  width: calc((100% - var(--pad) * 2) * 0.7010);
}

/* 18.1 — Rythme vertical relevé sur la maquette */

.shot--ccn-foule     { margin-top: clamp(38px, 4.73vw, 76px); }
.row--ccn-concept    { margin-top: clamp(17px, 2.17vw, 35px); }
.shot--ccn-triptyque { margin-top: clamp(40px, 5.03vw, 80px); }
.row--ccn-coul       { margin-top: clamp(22px, 2.78vw, 44px); }
.shot--ccn-lecture   { margin-top: clamp(31px, 3.91vw, 63px); }
/* la légende suit ce visuel de plus près que la gouttière commune : on
   annule la marge basse du visuel pour que celle de la légende gouverne */
.shot--ccn-chaise    { margin-top: clamp(13px, 1.66vw, 27px); margin-bottom: 0; }
.row--ccn-cap2       { margin-top: clamp(9px,  1.09vw, 18px); }
.shot--ccn-mailing   { margin-top: clamp(35px, 4.35vw, 70px); }
.duo--ccn            { margin-top: clamp(13px, 1.63vw, 26px); }
.more--ccn           { margin-top: clamp(59px, 7.33vw, 117px); }

/* 18.2 — Le carton et son enveloppe : deux colonnes inégales, alignées
   par le haut puisque les deux visuels n'ont pas la même hauteur. */

.duo--ccn {
  grid-template-columns: 39.28% 59.25%;
  gap: 1.473%;
  align-items: start;
}

@media (max-width: 1023px) {
  .shot--ccn-right {
    width: auto;
    margin-left: var(--pad);
  }

  .duo--ccn { grid-template-columns: 1fr; gap: var(--gap-shot); }
}

/* =========================================================
   PAGE PORTFOLIO  (maquette p.17)
   ========================================================= */

:root {
  --c-ink-mute: #9a9a9a;                     /* étiquettes de rubrique */
  --pf-gap:     clamp(7px, 0.833vw, 16px);   /* 13,3px @1600 — gouttière des 4 colonnes */
  --pf-word-step:   2s;      /* un mot à l'écran : 1,25 s de pose + les fondus */
  --pf-saut:    clamp(9px, 2.5vw, 15px);     /* interligne du dépliant téléphone */
}

/* L'onglet courant passe en demi-gras, mais seulement sur le portfolio
   lui-même : les pages projet pointent vers le portfolio sans s'y trouver,
   et la maquette les laisse en romain. */
.nav__link--here { font-weight: 500; }

.pf {
  /* Relevé sur la maquette « Page_Portfolio » : la capitale du titre vient à
     186 px du haut de la page pour 1920 de large. */
  padding: clamp(30px, 5.422vw, 110px) var(--pad) 0;
}

/* 19.1 — Le titre */

.pf__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 7.2240vw, 8.6688rem);   /* capitale 99px @1920 */
  line-height: 1;
  /* La maquette serre à peine les capitales : la valeur vient de la largeur
     du mot, 661 px pour 1920. */
  letter-spacing: -0.006em;
  text-transform: uppercase;
}

/* 19.1 bis — Le mot du titre se relaie tout seul

   Les cinq mots occupent la même cellule de grille : ils se superposent, la
   boîte prend la largeur du plus long et rien ne bouge autour d'elle. Chacun
   entre par le bas, tient sa pose, puis repart par le haut, décalé d'un
   cinquième du cycle sur son voisin — quand l'un sort, le suivant entre.

   Rien n'est écrit ici sur la police, le corps, la graisse, la couleur ni
   l'alignement : tout continue de venir de .pf__title, seules l'opacité et la
   translation sont animées. Ces deux propriétés se composent sans repeindre le
   texte, l'animation reste fluide y compris sur mobile. */

.pf__rotator {
  position: relative;
  display: block;
}

.pf__word {
  display: block;
  white-space: nowrap;
  animation: pf-word calc(var(--pf-word-step) * 5) infinite both;
}

/* Le premier mot reste dans le flux : c'est lui qui donne au titre sa hauteur
   et sa ligne de base, exactement comme le texte simple qu'il remplace. Les
   quatre autres se superposent à lui sans peser sur la mise en page, et
   restent invisibles si l'animation ne joue pas (impression, moteur de rendu
   qui n'anime pas). */
.pf__word + .pf__word {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.pf__word:nth-child(2) { animation-delay: calc(var(--pf-word-step) * 1); }
.pf__word:nth-child(3) { animation-delay: calc(var(--pf-word-step) * 2); }
.pf__word:nth-child(4) { animation-delay: calc(var(--pf-word-step) * 3); }
.pf__word:nth-child(5) { animation-delay: calc(var(--pf-word-step) * 4); }

/* Les paliers sont exprimés en pourcentages du cycle complet (5 × 2 s = 10 s) :
   0,375 s d'entrée (3,75 %), 1,25 s de pose, 0,375 s de sortie, puis le mot
   attend son tour. Tout étant proportionnel, changer --pf-word-step accélère ou
   ralentit l'ensemble sans toucher à ces paliers. La remise en bas se fait sur
   le palier suivant, à opacité nulle : invisible. Le déplacement est en em, il
   suit donc le corps du titre à toutes les largeurs d'écran.

   Les deux courbes sont écrites en toutes lettres et non via --ease /
   --ease-exit : dans un @keyframes, var() n'est pas substitué à
   animation-timing-function, la règle retomberait silencieusement sur « ease ».
   Ce sont bien les mêmes valeurs que les deux variables globales — les changer
   à un endroit demande de les changer aux deux. */
@keyframes pf-word {
  0% {
    opacity: 0;
    transform: translateY(var(--word-travel));
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);   /* = --ease */
  }
  3.75% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: linear;
  }
  16.25% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);  /* = --ease-exit */
  }
  20% {
    opacity: 0;
    transform: translateY(calc(var(--word-travel) * -1));
  }
  20.001%, 100% {
    opacity: 0;
    transform: translateY(var(--word-travel));
  }
}

/* Quand le système demande moins de mouvement, le titre redevient le mot fixe
   de départ. */
@media (prefers-reduced-motion: reduce) {
  .pf__word { animation: none; }
}

/* 19.2 — Les rubriques, calées à droite au-dessus du filet */

.pf__filters {
  margin-top: clamp(24px, 4.172vw, 85px);          /* capitale à 391 @1920 */
  padding-bottom: clamp(6px, 0.698vw, 14px);       /* filet à 426 @1920 */
  border-bottom: 1px solid var(--c-rule);
}

.pf__filter-list {
  display: flex;
  flex-wrap: wrap;
  /* Les rubriques sont calées à droite à toutes les largeurs, sur le bord
     droit de la grille, comme dans la maquette 1920 : la bascule à gauche qui
     valait sous 1024 px a été retirée, il n'y a plus qu'un seul alignement. */
  justify-content: flex-end;
  column-gap: clamp(14px, 1.979vw, 42px);   /* 38px @1920 */
  row-gap: 0.6em;
}

/* Les rubriques sont composées en gris ; seule celle où l'on se trouve est
   en noir. Rien n'est souligné : c'est le seul contraste de valeur qui
   désigne la rubrique courante. */
.pf__filter {
  display: inline-block;
  padding-bottom: 2px;
  color: var(--c-ink-mute);
  font-size: clamp(0.8rem, 0.9005vw, 1.081rem);   /* capitale 12px @1920 */
  text-transform: uppercase;
  transition: color 0.4s var(--ease);
}

/* Au survol, la rubrique passe en noir : elle prend l'apparence de celle
   qu'elle deviendra si on la choisit. */
.pf__filter:focus-visible { color: var(--c-ink); }

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .pf__filter:hover { color: var(--c-ink); }
}

/* La rubrique courante est celle que vise l'adresse. Sans rubrique dans
   l'adresse, c'est « Tous les projets », désignée une fois pour toutes dans le
   document par son aria-current. */
.pf__filter-list:not(:has(li:target)) .pf__filter[aria-current],
.pf__filter-list li:target .pf__filter { color: var(--c-ink); }

/* Les ancres du portfolio — celles des rubriques comme celles des projets,
   auxquelles renvoient l'accueil et les pages projet — ne viennent pas se
   coller au bord haut de la fenêtre. */
.pf__filter-list li,
.pf__card { scroll-margin-top: calc(var(--header-h) + clamp(24px, 3vw, 48px)); }

/* Le lien d'évitement mène au début du contenu : lui aussi doit s'arrêter sous
   le header et non derrière. */
main[id] { scroll-margin-top: var(--header-h); }

/* 19.2 bis — Le tri par rubrique, sans une ligne de script

   Chaque rubrique porte déjà l'identifiant que visent son propre lien et les
   étiquettes de la page d'accueil. Cliquer dessus en fait la cible du document,
   et il suffit alors de masquer les projets qui ne portent pas la classe
   correspondante. Arriver depuis l'accueil sur portfolio.html#web-design
   applique donc le même tri, sans rien de plus.

   Seule Social media attend encore la liste des projets qui lui reviennent.
   Pour la renseigner : marquer les cartes concernées d'une classe is-…, ajouter
   sa ligne ci-dessous, puis son identifiant dans la liste du :is() qui suit. */
.pf:has(#web-design:target)        .pf__card:not(.is-web-design),
.pf:has(#edition:target)           .pf__card:not(.is-edition),
.pf:has(#identite-visuelle:target) .pf__card:not(.is-identite-visuelle) { display: none; }

/* Le décalage d'Azandr n'a de sens que dans la composition complète : dès
   qu'un tri est actif, il ouvrirait un trou au bord gauche. */
.pf:has(:is(#web-design, #edition, #identite-visuelle):target) #azandr { margin-left: 0; }

/* 19.3 — Les cinq rangées de projets

   Relevé sur la maquette « Page_Portfolio », large de 1920 pour un cadre de
   1838 px entre les marges. Chaque visuel y a sa largeur propre, et les deux
   d'une même rangée s'alignent par le haut :

     Dans'&Co 1003 · Séra 817          Itinéraire dys est décalé d'un cran,
     Azandr 556 · Itinéraire dys 1096  Bingo·CCNN et Bella·Visible ne vont
     Bingo 1003 · CCNN 539             pas jusqu'à la marge droite : la
     Vinyle 1096 · Localocavore 724    maquette les laisse courts.
     Bella 911 · Visible 539

   Les dix cartes se suivent dans une seule liste. Chacune porte sa largeur en
   pourcentage du cadre, et le retour à la ligne se fait tout seul quand la
   suivante ne tient plus : aucune rangée n'est écrite en dur. Un tri par
   rubrique n'a donc rien de particulier à défaire — il masque des cartes, les
   autres se replacent. */

.pf__grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.97%;                              /* 18px @1920 */
  row-gap: clamp(38px, 8.427vw, 182px);           /* 162px @1920 */
  margin: clamp(15px, 1.458vw, 32px) 0 clamp(60px, 8.932vw, 192px);
}

#dans-and-co       { width: 54.55%; }
#sera              { width: 44.44%; }
#azandr            { width: 30.25%; margin-left: 9.14%; }
#itineraire-dys    { width: 59.63%; }
#bingo             { width: 54.55%; }
#ccnn              { width: 29.32%; }
#vinyle            { width: 59.63%; }
#localocavore      { width: 39.39%; }
#bella-letteratura { width: 49.56%; }
#visible-invisible { width: 29.32%; }

.pf__fig { margin: 0; }

/* Le cadre de la vignette. C'est lui qui rogne le zoom : l'image grandit à
   l'intérieur, le cadre garde sa taille, et la légende juste en dessous ne
   bouge pas d'un pixel. Sans ce cadre, l'image agrandie viendrait mordre sur
   le nom du projet. */
.pf__shot {
  display: block;
  overflow: hidden;
}

/* Les fichiers sont déjà découpés au format de leur cadre : la hauteur suit
   d'elle-même, il n'y a rien à recadrer à l'affichage. */
.pf__fig img {
  width: 100%;
  height: auto;
}

/* Toutes les vignettes réagissent, qu'elles mènent à une page ou non : le zoom
   est ici une manière de regarder, pas une promesse de clic. Le survol se joue
   donc sur la figure — qui, sur les projets liés, occupe exactement la même
   surface que le lien. Il n'agit que sur l'échelle : l'image garde ses
   couleurs pleines. Le clavier, lui, ne s'arrête que sur ce qui est cliquable,
   d'où le :focus-visible resté sur le lien. */
.pf__fig img {
  transition: transform var(--t-zoom) var(--ease);
}

.pf__card a:focus-visible img {
  transform: scale(var(--zoom));
}

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .pf__fig:hover img {
    transform: scale(var(--zoom));
  }
}

/* Quand le système demande moins de mouvement, il ne reste que le voile. */
@media (prefers-reduced-motion: reduce) {
  .pf__card a:focus-visible img { transform: none; }

  /* Survol réservé aux appareils à souris : sur un écran tactile un
     appui laisserait l'effet « collé » jusqu'au suivant. */
  @media (hover: hover) and (pointer: fine) {
    .pf__fig:hover img { transform: none; }
  }
}

.pf__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1em;
  margin-top: clamp(5px, 0.578vw, 12px);   /* ligne de base à 33px du bas du visuel */
}

.pf__name {
  font-size: clamp(0.85rem, 1.063vw, 1.275rem);   /* 20,4px @1920 — capitale 14,2 */
  text-transform: uppercase;
}

.pf__tag {
  /* la plus longue étiquette passe à la ligne plutôt que de déborder de
     sa case dans les largeurs intermédiaires */
  flex: none;
  margin-left: auto;
  font-size: clamp(0.63rem, 0.6927vw, 0.831rem);    /* 13,3px @1920 — capitale 9,2 */
  color: var(--c-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Sous 1024 px la composition de la maquette n'a plus la place de tenir : les
   dix visuels reprennent deux largeurs égales, et leurs cadres inégaux
   deviennent des carrés — c'est le format que toutes les photographies
   supportent. Le décalage d'Azandr disparaît avec la composition. */
@media (max-width: 1023px) {
  .pf__grid {
    column-gap: 3%;
    row-gap: clamp(22px, 3.385vw, 55px);
    margin-bottom: clamp(60px, 9.4225vw, 151px);
  }

  /* La liste des dix reprend celle qui donne les largeurs plus haut : même
     poids de sélecteur, écrite après, elle l'emporte sans !important. */
  #dans-and-co, #sera, #azandr, #itineraire-dys, #bingo,
  #ccnn, #vinyle, #localocavore, #bella-letteratura, #visible-invisible { width: 48.5%; margin-left: 0; }

  .pf__fig img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

@media (max-width: 599px) {
  #dans-and-co, #sera, #azandr, #itineraire-dys, #bingo,
  #ccnn, #vinyle, #localocavore, #bella-letteratura, #visible-invisible { width: 100%; }
}

/* =========================================================
   PAGE PROJET — AZANDR  (maquette p.16)
   ========================================================= */

/* La couverture est trois points plus haute que sur les autres pages projet,
   et la maquette resserre d'autant le cartouche qui la suit. */
.cover--az { aspect-ratio: 1920 / 1009; }

.row--az-meta {
  padding-top: clamp(10px, 1.100vw, 18px);      /* 17,6px @1600 */
  padding-bottom: clamp(39px, 4.856vw, 78px);   /* 77,7px @1600 */
}

/* Rythme vertical relevé sur la maquette */
.shot--az-platine { margin-top: clamp(27px, 3.387vw, 54px); }   /* 54,2px */
.duo--az          { margin-top: clamp(26px, 3.250vw, 52px); }   /* 52,0px */
.more--az         { margin-top: clamp(67px, 8.416vw, 135px); }  /* 134,7px */

/* Cette marge-ci se fusionne avec celle du visuel qui précède : elle est donc
   comptée depuis le bas de l'image, et non ajoutée à l'écart existant. Le
   sélecteur reprend celui de la règle générale, qui vise le même élément. */
.wrap > .row--rule.row--az-coul { margin-top: clamp(14px, 1.758vw, 29px); }

/* La maquette laisse un peu plus d'air entre ce filet-ci et son texte qu'entre
   celui du brief et le sien : l'écart est reproduit là où il se trouve. */
.row--az-coul { padding-top: clamp(11px, 1.353vw, 22px); }      /* 21,6px */

.more--az .more__title { margin-bottom: clamp(20px, 2.491vw, 40px); }

/* Le bob et le tee-shirt occupent la largeur du cadre à parts presque égales,
   et non 2/3 – 1/3 comme les autres duos du site. */
.duo--az {
  grid-template-columns: 50.955% 47.954%;
  gap: 1.091%;
}

@media (max-width: 1023px) {
  .duo--az { grid-template-columns: 1fr; gap: var(--gap-shot); }

  /* en colonne unique, la couverture reprend le format commun */
  .cover--az { aspect-ratio: 4 / 3; }
}

@media (max-width: 599px) {
  /* Seule couverture du site à venir toucher les deux bords de l'écran : la
     photographie prend toute la largeur, et le titre garde son retrait, celui
     de la colonne de texte qui suit. */
  .cover--az {
    aspect-ratio: 3 / 4;
    margin-inline: 0;
  }
}

/* =========================================================
   PAGE PROJET — BINGO  (maquette p.15)
   ========================================================= */

/* Même couverture que la page Azandr, et le même cartouche resserré :
   la maquette leur donne trois points de plus qu'aux autres pages projet. */
.cover--bg { aspect-ratio: 1920 / 1009; }

.row--bg-meta {
  padding-top: clamp(10px, 1.100vw, 18px);      /* 17,6px @1600 */
  padding-bottom: clamp(39px, 4.856vw, 78px);   /* 77,7px @1600 */
}

/* ---------- 21.1 La campagne : deux cadres inégaux ----------
   Largeurs et gouttière sont relevées telles quelles sur la maquette, qui
   ne les égalise pas ; la piste paire porte la gouttière. Les deux visuels
   sont calés par le bas, le second étant un peu moins haut. */

.trio {
  display: grid;
  margin: var(--gap-shot) var(--pad);
  align-items: end;
}

.trio .shot { margin: 0; }

.trio img {
  width: 100%;
  height: auto;
}

/* L'affiche du milieu a été retirée de la page. Les deux photographies qui
   restent gardent leur largeur ; la première est décalée sur l'alinéa du
   texte, à 29,9 % de la colonne courante. Cet alinéa vaut --pad + 29,9 %
   de (100% - 2 x --pad), soit la marge ci-dessous ; les largeurs sont
   reprises en part du cadre ainsi resserré.
   La gouttière est celle que la maquette laissait entre les deux premiers
   cadres de la campagne ; la paire ne va donc plus jusqu'au bord droit,
   et le blanc restant ferme le rang. */
.trio--bg {
  margin-left: calc(29.9% + 0.402 * var(--pad));
  grid-template-columns: 41.500% 9.752% 39.684%;
}

.trio--bg > :nth-child(1) { grid-column: 1; }
.trio--bg > :nth-child(2) { grid-column: 3; }

/* La maquette rentre la campagne, le duo du jeu et le kit complet de six
   points de plus à droite que la couverture et le premier duo. L'écart est
   reproduit tel quel, les largeurs de colonnes s'y rapportant. */
.trio--bg,
.duo--bg-jeu,
.shot--bg-caisse { margin-right: clamp(21px, 2.604vw, 50px); }   /* 41,7px @1600 */

/* ---------- 21.2 Les deux paires de visuels ---------- */

.duo--bg-boite {
  grid-template-columns: 36.825% 61.954%;
  gap: 1.221%;
}

.duo--bg-jeu {
  grid-template-columns: 46.386% 52.040%;
  gap: 1.574%;
  align-items: end;
}

/* ---------- 21.3 Rythme vertical relevé sur la maquette ---------- */

.duo--bg-boite    { margin-top: clamp(39px, 4.838vw,  78px); }
.row--bg-histoire { margin-top: clamp(19px, 2.323vw,  38px); }
.trio--bg         { margin-top: clamp(43px, 5.375vw,  86px); }
.row--bg-baseline { margin-top: clamp(56px, 7.058vw, 113px); }
.duo--bg-jeu      { margin-top: clamp(18px, 2.188vw,  36px); }
.shot--bg-caisse  { margin-top: clamp(17px, 2.106vw,  34px); }
.more--bg         { margin-top: clamp(87px, 10.858vw, 174px); }

.more--bg .more__title { margin-bottom: clamp(15px, 1.851vw, 30px); }

@media (max-width: 1023px) {
  /* en colonne unique, tous les blocs reprennent les marges communes */
  .trio--bg,
  .duo--bg-jeu,
  .shot--bg-caisse { margin-inline: var(--pad); }

  .duo--bg-boite,
  .duo--bg-jeu { grid-template-columns: 1fr; gap: var(--gap-shot); }

  .trio--bg {
    grid-template-columns: 1fr;
    gap: var(--gap-shot);
  }

  .trio--bg > :nth-child(1),
  .trio--bg > :nth-child(2) { grid-column: 1; }

  /* et la couverture, le format commun */
  .cover--bg { aspect-ratio: 4 / 3; }
}

@media (max-width: 599px) {
  .cover--bg { aspect-ratio: 3 / 4; }
}

/* =========================================================
   PAGE PROJET — VINYLE  (maquette p.14)
   ========================================================= */

/* La seule couverture claire du site : le titre et l'en-tête y passent à
   l'encre. Le format et le cartouche resserré sont ceux des pages Azandr
   et Bingo. */
.cover--vin { aspect-ratio: 1920 / 1009; }

.cover--vin .cover__title { color: var(--c-ink); }

.row--vin-meta {
  padding-top: clamp(10px, 1.100vw, 18px);      /* 17,6px @1600 */
  padding-bottom: clamp(39px, 4.856vw, 78px);   /* 77,7px @1600 */
}

/* Les deux détails de l'illustration : la maquette leur donne des largeurs
   proches sans les égaliser. */
.duo--vin {
  grid-template-columns: 45.087% 53.821%;
  gap: 1.092%;
}

/* La maquette en situation est calée à droite du cadre, comme l'abribus de
   la page Bella Letteratura. Elle s'arrête deux points avant le bord du
   cadre : l'écart est repris tel quel, d'où sa marge droite propre. */
.shot--vin-pomme {
  margin-left: auto;
  margin-right: clamp(19px, 2.396vw, 46px);     /* 38,3px @1600 */
  width: 63.854%;                               /* 1226 points sur 1920 */
}

/* ---------- Rythme vertical relevé sur la maquette ---------- */

.duo--vin        { margin-top: clamp(33px, 4.188vw,  68px); }
.shot--vin-pomme { margin-top: clamp(19px, 2.344vw,  38px); }
.more--vin       { margin-top: clamp(73px, 9.171vw, 147px); }

.more--vin .more__title { margin-bottom: clamp(18px, 2.241vw, 36px); }

@media (max-width: 1023px) {
  .duo--vin { grid-template-columns: 1fr; gap: var(--gap-shot); }

  /* en colonne unique, la maquette en situation reprend toute la largeur */
  .shot--vin-pomme {
    width: auto;
    margin-left: var(--pad);
    margin-right: var(--pad);
  }

  /* et la couverture, le format commun */
  .cover--vin { aspect-ratio: 4 / 3; }
}

@media (max-width: 599px) {
  .cover--vin { aspect-ratio: 3 / 4; }
}

/* =========================================================
   PAGE CONTACT  (maquette « New_Page_Contact »)
   =========================================================
   Une page-écran sur fond noir, comme l'accueil : le nom en grand, la
   présentation, le bouton d'appel et les coordonnées à gauche, le portrait
   posé à droite jusqu'au bord de la page.

   Le fichier de la maquette est large de 2944 px pour une page de 1920 :
   toutes les valeurs ci-dessous sont ses mesures ramenées à cette largeur,
   puis écrites en vw pour que la composition garde ses proportions d'un
   écran à l'autre. Les commentaires donnent la valeur relevée à 1920. */

.ct {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;

  /* La maquette rentre toute la colonne de texte bien à l'intérieur de la
     marge du bandeau : 101 px pour 1920, soit 5,266 %. Sur petit écran ce
     retrait tomberait sous la marge commune du site, qui reprend alors. */
  padding: 0 max(var(--pad), 5.266%) clamp(40px, 8.6vw, 190px);
}

/* ---------- 23.1 Le nom ---------- */

.ct__title {
  margin: 0;
  padding-top: 12.245vw;                       /* capitale à 249,8 @1920 */
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.603vw, 6.5rem);     /* 88,4px @1920 — capitale 64,6 */
  line-height: 1.06;
  letter-spacing: 0.0192em;
  text-transform: uppercase;
}

/* ---------- 23.2 La présentation ---------- */

.ct__texte {
  max-width: 34.84vw;                          /* 669px @1920 */
  margin-top: 1.917vw;                         /* 1re ligne de base à 386,1 */
  font-size: clamp(15px, 1.130vw, 26px);       /* 21,7px @1920 */
  line-height: 1.157;                          /* 25,1px entre deux lignes */
}

.ct__texte p { margin: 0; }

/* La maquette laisse exactement une ligne blanche entre les deux
   paragraphes : l'écart vaut donc un interligne. */
.ct__texte p + p { margin-top: 1.157em; }

.ct__texte strong { font-weight: 600; }

/* ---------- 23.3 Le bouton ---------- */

/* Même dessin que celui du pied de page — bord d'un pixel, flèche tracée,
   remplissage au survol : les règles communes sont écrites là-bas, avec lui.
   Seuls le corps et les retraits sont propres à cette page. */
.ct__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.637em;                                /* 12,4px @1920 */
  margin-top: 1.245vw;                         /* haut du cadre à 690,7 */
  padding: 0.44em 0.81em;
  font-size: clamp(13px, 1.013vw, 21px);       /* 19,5px @1920 */
  line-height: 1.222;
}

.ct__cta-arrow {
  width: 0.637em;
  height: 0.637em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* ---------- 23.4 Les coordonnées ---------- */

.ct__coord {
  margin-top: 5.177vw;                         /* 1re ligne de base à 851,7 */
  font-size: var(--fs-ui);                     /* 17,6px relevés, 18 sur le site */
  line-height: 1.36;                           /* 24,5px entre deux lignes */
}

.ct__coord a { transition: opacity 0.4s var(--ease); }
.ct__coord a:focus-visible { opacity: 0.55; }

/* Survol réservé aux appareils à souris : sur un écran tactile un
   appui laisserait l'effet « collé » jusqu'au suivant. */
@media (hover: hover) and (pointer: fine) {
  .ct__coord a:hover { opacity: 0.55; }
}

/* ---------- 23.5 Le portrait ---------- */

/* Il touche le bord droit de la page — la maquette l'y fait déborder — et
   ses trois autres cotes sont écrites en vw : le cadre garde ainsi le même
   rapport à toutes les largeurs, et la photographie n'a rien à recadrer. */
.ct__portrait {
  position: absolute;
  right: 0;
  top: 12.50vw;                                /* 240px @1920 */
  width: 27.89vw;                              /* 535,4px @1920 */
  height: 34.38vw;                             /* 660px @1920 */
  margin: 0;
}

.ct__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 23.6 Adaptations ---------- */

/* Sous 1024 px la page cesse d'être une scène : le portrait quitte le bord
   droit et vient se ranger sous le nom, puis la présentation, le bouton et
   les coordonnées se suivent. */
/* Les deux maquettes — « page_contact_telephone » à 870 px de large et
   « page_contact_tablette » à 1348 — décrivent la même page : tout est rangé
   dans une seule colonne centrée, le nom, le portrait, la présentation, le
   bouton et les coordonnées à la suite.

   Elles ne donnent pas les mêmes proportions, et aucune mesure en pourcentage
   ne passe de l'une à l'autre : le portrait vaut 52 % de la largeur sur
   téléphone et 39 % sur tablette, le nom 7,9 % contre 7,0. Chaque mesure est
   donc une droite entre les deux relevés — d'où les calc() ci-dessous, qui
   donnent le chiffre du téléphone à 390 px et celui de la tablette à 768. */
@media (max-width: 1023px) {
  .ct {
    min-height: 0;
    padding-top: var(--header-h);
    padding-bottom: clamp(39px, 9.79vw, 90px);
    text-align: center;
  }

  /* Le nom tient sur une ligne et occupe la même part de la page que sur les
     deux dessins — 77,6 % à 390, 68,1 % à 768. C'est la largeur du bloc qui est
     reprise, pas la hauteur des lettres : les maquettes sont composées dans un
     caractère plus étroit que celui du site, si bien qu'à hauteur de capitale
     égale le nom y serait un quart trop large et passerait à la ligne. */
  .ct__title {
    padding-top: calc(54.5px - 1vw);
    font-size: min(calc(4.675vw + 6px), 56px);
  }

  /* 202,6 px de large à 390, 296 à 768 ; la photographie n'est pas recadrée */
  .ct__portrait {
    position: static;
    width: min(calc(24.71vw + 106px), 360px);
    height: auto;
    aspect-ratio: 821 / 1012;
    margin: calc(1.934vw + 10.8px) auto 0;
  }

  /* Le seul bloc long de la page. Centré sur six lignes, l'œil doit chercher
     le début de chacune ; le reste de la page — le nom, le bouton, les
     coordonnées — tient sur des lignes courtes et garde le centrage du
     dessin. L'interligne s'ouvre un peu, la mesure étant très étroite. */
  .ct__texte {
    max-width: min(calc(74.07vw + 14px), 100%);
    margin: calc(3.018vw + 9.3px) auto 0;
    font-size: var(--fs-body);
    line-height: 1.45;
    text-align: left;
  }

  /* Le bouton et les trois coordonnées sont les gestes de la page : ce sont
     eux qu'on vise avec un pouce. Leur zone sensible passe de 25 et 14 px de
     haut à une trentaine, en convertissant l'interligne en retrait — le texte
     ne bouge donc presque pas, seule la surface touchable s'agrandit. */
  .ct__cta {
    margin-top: calc(3.76vw + 3.4px);
    padding: 0.7em 1.1em;
    font-size: var(--fs-body);
  }

  .ct__coord {
    margin-top: calc(3.78vw + 35.7px);
    line-height: 1.1;
  }

  .ct__coord a {
    display: inline-block;
    padding: 9px 12px;
  }
}

/* =========================================================
   24. FORMAT TÉLÉPHONE  (maquette « maquettes-telephone », p.1)
   =========================================================
   La page projet Bella Letteratura sert de patron : c'est elle que la
   maquette décrit, et l'essentiel de ce qu'elle fixe — le bandeau, le pied
   de page, l'échelle typographique, le rythme des visuels — vaut pour
   toutes les pages.

   Tout est relevé sur une maquette large de 360 px. Les valeurs sont donc
   écrites en vw autour de cette référence : à 360 px elles tombent au
   millimètre sur le dessin, et elles grandissent avec l'écran jusqu'à la
   bascule de 600 px, si bien que la composition reste la même d'un
   téléphone à l'autre au lieu de se dilater par endroits. */

/* Le bouton du menu n'existe que sur téléphone : ailleurs la navigation
   tient sur la ligne du bandeau et n'a rien à déplier. Le dépliant des
   rubriques du portfolio est dans le même cas, et le second tracé des traits
   du logotype annoté attend de la même façon son tour. */
.burger,
.burger__case,
.pf__case,
.pf__toggle,
.pf__saut,
.nav__fond,
.diagram__lines--tel { display: none; }

/* ---------- 23 bis. Le logotype annoté de Bella, hors du grand écran ----------
   Comme celui d'Itinéraire dys, il garde sa composition libre au lieu de
   s'empiler : les deux premières annotations de part et d'autre, alignées par
   le bas, le logotype au centre, la troisième en dessous à gauche, et les trois
   traits qui les relient. Les repères sont relevés dans un cadre de 327 × 296 px
   — celui du second tracé.

   Ici, contrairement à Itinéraire dys, rien n'a eu besoin d'être recalculé : les
   deux annotations du haut sont accrochées par le bas et la troisième par le
   haut, si bien que les traits touchent toujours le même bord, quel que soit le
   nombre de lignes. Neuf unités au-dessus des deux premières, neuf virgule six
   au-dessus de la troisième, à toutes les largeurs. */
@media (max-width: 1023px) {
  .diagram--bella {
    display: block;
    position: relative;
    aspect-ratio: 327 / 296;
    margin: clamp(30px, 12vw, 62px) 0 clamp(12px, 5.6vw, 30px);
    line-height: 1.2;
  }

  .diagram--bella .diagram__lines      { display: none; }
  .diagram--bella .diagram__lines--tel { display: block; }

  .diagram--bella .diagram__logo,
  .diagram--bella .diagram__note {
    position: absolute;
    left: auto;
    top: auto;
  }

  /* les retours de ligne écrits dans le texte reprennent du service : c'est
     eux qui donnent aux annotations leur largeur */
  .diagram--bella .diagram__note {
    width: max-content;
    max-width: 55%;
    text-align: left;
  }

  .diagram--bella .diagram__note br { display: revert; }

  /* le fichier du logotype porte une marge blanche à droite : les repères
     ci-dessous visent la boîte du fichier, pas le dessin */
  .diagram--bella .diagram__logo {
    left: 32.93%;
    top: 24.90%;
    width: 55.15%;
    height: auto;
  }

  /* les deux annotations du haut sont alignées par le bas, quel que soit
     leur nombre de lignes */
  .diagram--bella .diagram__note--a { left:  0.8%; bottom: 85.5%; }
  .diagram--bella .diagram__note--c { left: 55.1%; bottom: 85.5%; }
  .diagram--bella .diagram__note--d { left:  0.3%; top:    82.6%; }

  /* Les trois traits ci-dessous ont chacun une variante pour la tablette, où le
     logotype est recentré : un seul jeu est visible à la fois. */
  .diagram--bella .trait--b1-tab,
  .diagram--bella .trait--b2-tab,
  .diagram--bella .trait--b3-tab { display: none; }

  /* Sur tablette, le montage s'étire jusqu'à 640px — la mesure d'Itinéraire dys
     — mais il est centré sur la page, et le logotype est centré dans le cadre.

     Le fichier du logotype porte à sa droite la place qu'occupait le trait
     d'appel du grand écran ; sans lui, le dessin se retrouve décalé de 7,1 %
     vers la droite dans sa boîte. Le repère ci-dessous reprend ces 7,1 %, si
     bien que ce qui se voit — le livre et le nom — tombe au milieu du cadre, et
     le cadre au milieu de la page. Les traits suivent, par leur variante. */
  @media (min-width: 600px) {
    .diagram--bella {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }

    .diagram--bella .diagram__logo { left: 25.83%; }

    /* Les annotations sont composées sur la largeur de leur texte : en pixels
       elle ne bouge pas, mais rapportée au cadre elle rétrécit à mesure qu'il
       s'agrandit. La deuxième s'en trouvait décalée — le trait arrivait sous
       sa fin plutôt que sous son milieu. Elle est ramenée pour que le trait
       la rejoigne au même endroit que sur le dessin, à peu près à mi-texte. */
    .diagram--bella .diagram__note--c { left: 63.2%; }

    .diagram--bella .trait--b1,
    .diagram--bella .trait--b2,
    .diagram--bella .trait--b3     { display: none; }

    .diagram--bella .trait--b1-tab,
    .diagram--bella .trait--b2-tab,
    .diagram--bella .trait--b3-tab { display: inline; }
  }
}

/* Une exception : sur téléphone, la première annotation du symbole de
   Dans'&Co empiète sur le dessin. Un fond opaque y masquerait un morceau du
   symbole ; aucun trait ne passe sous ce texte à cette taille, le fond n'y
   sert donc à rien. */
@media (max-width: 599px) {
  .diagram--dc2 .diagram__note--d2a { background: none; }
}

@media (max-width: 599px) {

  /* ---------- 24.1 Échelle typographique ----------
     La maquette donne un corps de 10,5 px à 360 px de large — une taille
     juste sur un dessin qu'on regarde à plat, trop petite sur un téléphone
     qu'on tient à cinquante centimètres. Les trois valeurs sont relevées au
     seuil de lisibilité courant, en gardant les rapports du dessin entre
     elles : le texte reste plus petit que la norme du web, sans descendre là
     où il faut plisser les yeux. Les titres, eux, ne bougent pas. */
  :root {
    --fs-body: clamp(14px,   3.85vw, 16px);   /* 15,0px @390 — était 11,4 */
    --fs-ui:   clamp(14px,   3.85vw, 16px);
    --fs-tag:  clamp(12px,   3.30vw, 14px);   /* 12,9px @390 — était 10,6 */

    /* Le bandeau n'y porte plus que le nom et le bouton du menu : rien ne
       serre, il reprend la taille du texte courant. */
    --fs-nav:  var(--fs-ui);

    /* le bandeau retrouve une seule ligne : la hauteur qui décale les
       ancres redevient celle du grand écran */
    --header-h: calc(14px + 13px + 1.4 * var(--fs-nav));
  }

  /* Les deux lignes qui suivent le titre de l'accueil suivent leur propre
     courbe, interpolée entre les trois maquettes : elle ne passe pas par
     --fs-body et retombait donc à 10,55 px — la plus petite valeur de tout le
     site, en gris sur fond noir de surcroît. Elles reçoivent ici le même
     plancher que le reste, en gardant leur écart : la ligne des métiers un
     cran sous l'intro, comme sur le dessin, et toujours sur une seule ligne. */
  .hero__metier { font-size: clamp(12.5px, 3.47vw, 13.5px); }

  .hero__intro {
    font-size: clamp(13.5px, 3.75vw, 15px);
    line-height: 1.4;
  }

  /* ---------- 24.2 Le bandeau et son menu ----------
     Le bandeau redevient une seule ligne, posé sur la couverture, le nom à
     gauche et le bouton à droite. */
  .header {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 14px var(--pad) 13px;
  }

  /* posé sur la couverture, comme sur grand écran : la maquette montre le
     nom en blanc sur la photographie, et non un bandeau empilé au-dessus */
  .header--over {
    position: fixed;
    color: #fff;
  }

  .header--over.header--ink { color: var(--c-ink); }

  /* La case à cocher garde l'état ouvert/fermé. Elle reste dans la page —
     donc atteignable au clavier — mais invisible : c'est l'étiquette qui
     porte le dessin, et c'est elle qui reçoit le cadre de focus. */
  .burger__case {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .burger__case:focus-visible + .burger {
    outline: 2px solid currentColor;
    outline-offset: 8px;
  }

  /* Trois traits de 1 px espacés de 3, dans un rectangle de 15 × 9 —
     les mesures de la maquette. Le retrait porte la cible tactile à
     47 × 43 px, la marge négative le reprend pour que le dessin ne bouge
     pas d'un pixel. */
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: content-box;
    width: 15px;
    height: 9px;
    padding: 17px 16px;
    margin: -17px -16px;
    cursor: pointer;
  }

  .burger span {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
  }

  .nav { display: none; }

  /* --- Le menu déplié, d'après la maquette « Menu burger » ---

     Déplié, le menu n'est plus un tiroir sous le bandeau : c'est un voile noir
     à quatre-vingt-dix pour cent qui prend tout l'écran, le nom et la page
     disparaissent dessous, et il ne reste que le bouton — trois traits passés
     à la verticale — et les trois mots, centrés, la page courante en blanc et
     les deux autres au gris des maquettes de nuit.

     Les mesures viennent du dessin, relevé à 692 px de large : hauteur de
     capitale 45, interligne d'axe à axe 137, bouton de 38 sur 62 fait de trois
     traits de 5,33 séparés de 11. Elles sont reportées en pourcentages de la
     largeur, bornées pour rester lisibles d'un téléphone à l'autre. */
  .burger__case:checked ~ .nav {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 1;              /* dans le bandeau : au-dessus du nom */
    place-content: center;
    background: rgb(0 0 0 / 90%);
  }

  .burger__case:checked ~ .nav .nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* d'axe à axe, 137 pour une capitale de 45 : l'écart vaut donc 1,094 fois
       le corps, une fois le corps lui-même retiré des 2,094 */
    gap: 1.094em;
    /* Le corps suit la largeur, comme tout le reste du téléphone. Le second
       terme n'est qu'un garde-fou : il ne prend la main que sur une fenêtre
       anormalement basse — plus large que haute d'un facteur 1,58 — où les
       trois mots viendraient sinon buter dans le bouton. Aucun téléphone n'y
       tombe. */
    font-size: min(clamp(29px, 9.452vw, 48px), 6vh);
    line-height: 1;
  }

  /* Les trois mots sont blancs, y compris celui de la page où l'on se trouve :
     le gris de la maquette, qui éteignait les deux autres, ne sert plus. */
  .burger__case:checked ~ .nav .nav__link {
    color: #fff;
    font-size: inherit;
    font-weight: 300;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  /* Le bouton quitte le coin du bandeau pour le premier tiers de l'écran, et
     ses trois traits se dressent : c'est lui qui referme le menu.

     Le passage se fait d'un seul mouvement : les traits ne sont pas redessinés
     à la verticale, c'est le bouton entier qui pivote d'un quart de tour. Trois
     traits couchés deviennent ainsi trois traits debout sans qu'aucun ne
     disparaisse — et le quart de tour, lui, s'anime.

     Le dessin tient en une seule mesure : la hauteur des traits. Les 38 de
     large et les 5,33 d'épaisseur du relevé s'en déduisent, si bien que la
     marque garde ses proportions quelle que soit la taille de l'écran. Le
     garde-fou en vh est celui des mots. Le relevé donnait 8,96vw — 62 px sur
     les 692 du dessin ; la marque est composée un cinquième plus petite, elle
     pesait trop face aux mots. */
  .burger__case:checked + .burger {
    position: fixed;
    left: 50%;
    top: 27.24%;
    z-index: 2;
    --marque: min(clamp(22.5px, 7.17vw, 37px), 4.4vh);
    /* après le quart de tour, la largeur devient la hauteur du dessin */
    width: var(--marque);
    height: calc(var(--marque) * 38 / 62);
    margin: 0;
    transform: translate(-50%, -50%) translate(0px, 0px) rotate(450deg);
    color: #fff;
    animation: burger-ouvre 0.75s cubic-bezier(0.3, 0, 0.15, 1) both;
  }

  .burger__case:checked + .burger span {
    width: 100%;
    height: calc(var(--marque) * 5.333 / 62);
    animation: burger-traits 0.75s cubic-bezier(0.3, 0, 0.15, 1) both;
  }

  /* Le premier temps de l'ouverture : le bouton part d'où il était — le coin
     du bandeau, à 25,5px du bord droit et sous les quatorze pixels de retrait,
     à mi-hauteur de la ligne du nom — et rejoint le centre en grandissant, le
     temps d'un tour complet et d'un quart : quatre cent cinquante degrés, pour
     qu'il fasse le tour et s'arrête à la verticale. Les deux repères sont
     écrits en toutes lettres parce qu'une translation ne peut pas interpoler
     depuis une position statique. */
  @keyframes burger-ouvre {
    from {
      width: 15px;
      height: 9px;
      transform: translate(-50%, -50%)
                 translate(calc(50vw - 25.5px),
                           calc(14px + 0.7 * var(--fs-nav) - 27.24vh))
                 rotate(0deg);
    }
    to {
      width: var(--marque);
      height: calc(var(--marque) * 38 / 62);
      transform: translate(-50%, -50%) translate(0px, 0px) rotate(450deg);
    }
  }

  @keyframes burger-traits {
    from { height: 1px; }
    to   { height: calc(var(--marque) * 5.333 / 62); }
  }

  /* Le second temps : le voile se pose, puis les trois mots viennent l'un après
     l'autre, à un huitième de seconde d'intervalle. Le premier part quand le
     bouton achève sa course. */
  .burger__case:checked ~ .nav { animation: voile-apparait 0.35s var(--ease) both; }

  .burger__case:checked ~ .nav .nav__list > li {
    animation: mot-apparait 0.45s cubic-bezier(0.2, 0, 0.2, 1) both;
  }

  .burger__case:checked ~ .nav .nav__list > li:nth-child(1) { animation-delay: 0.70s; }
  .burger__case:checked ~ .nav .nav__list > li:nth-child(2) { animation-delay: 0.83s; }
  .burger__case:checked ~ .nav .nav__list > li:nth-child(3) { animation-delay: 0.96s; }

  @keyframes voile-apparait {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes mot-apparait {
    from { opacity: 0; transform: translateY(0.45em); }
    to   { opacity: 1; transform: none; }
  }

  /* Le voile tout entier referme le menu : son fond est une seconde étiquette
     de la même case à cocher, posée sous les mots. Un appui n'importe où hors
     des trois liens suffit donc à refermer — le bouton, lui, reste au-dessus
     et continue de faire le même office. */
  .burger__case:checked ~ .nav .nav__fond {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: pointer;
  }

  .burger__case:checked ~ .nav .nav__list {
    position: relative;
    z-index: 1;
  }

  /* Rien de tout cela pour qui demande moins de mouvement : le menu s'ouvre
     d'un coup, comme avant. */
  @media (prefers-reduced-motion: reduce) {
    .burger__case:checked + .burger,
    .burger__case:checked + .burger span,
    .burger__case:checked ~ .nav,
    .burger__case:checked ~ .nav .nav__list > li { animation: none; }
  }

  /* La page ne défile plus derrière le voile. Les deux éléments sont visés :
     c'est la racine qui porte le défilement, le corps ne suffirait pas. */
  html:has(.burger__case:checked),
  body:has(.burger__case:checked) { overflow: hidden; }


  /* ---------- 24.3 La couverture ----------
     Sur téléphone la photographie occupe toute la largeur, bord à bord, et
     le titre passe dessous, en noir. La classe « cover--tel » marque les
     pages dont la maquette téléphone a été reprise : elle s'ajoute au fur
     et à mesure, dans le HTML de chaque page traitée. */
  .cover--tel {
    aspect-ratio: auto;
    overflow: visible;
    margin: 0;
    background: none;
  }

  .cover--tel picture { display: block; }

  .cover--tel .cover__img {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 360 / 417;
    object-fit: cover;
  }

  .cover--tel .cover__title {
    position: static;
    margin: 17px var(--pad) 0;
    color: var(--c-ink);
    font-size: clamp(20px, 6.42vw, 33px);   /* capitale 16,5px @360 */
    line-height: 1.05;
  }

  /* « Bella Letteratura » tient sur une ligne, « Forum » passe dessous */
  .cover--tel .cover__line { display: inline; }

  .cover--tel .cover__line--sub {
    display: block;
    font-size: 0.7em;
    line-height: 1.4;
  }

  /* ---------- 24.4 Rythme des rangées ----------
     Le cartouche se resserre : douze pixels sous « Forum », neuf au-dessus du
     filet. Le brief, lui, garde l'air que la maquette lui laisse. */
  .row--meta { padding: clamp(1px, 0.83vw, 6px) 0 clamp(5px, 1.94vw, 11px); }

  .row--meta + .row--rule { padding-top: clamp(15px, 5vw, 30px); }

  .row { gap: clamp(5px, 2.05vw, 12px); }

  /* une légende sous un visuel : la maquette lui laisse un peu plus d'air
     que la gouttière entre deux visuels */
  .row--free { margin-top: clamp(16px, 5.44vw, 30px); }

  /* la mention des domaines vient buter sur la marge de droite */
  .row--meta .row__text { text-align: right; }

  .row__text { line-height: 1.2; }

  .wrap > .row--rule:first-child { margin-top: clamp(6px, 2.9vw, 16px); }

  /* Le logotype annoté garde sa composition libre depuis la bascule à 1023px :
     tout est écrit plus haut, avec le plafond de cadre qui ne vaut qu'au-dessus
     de 600px. Ici le cadre occupe toute la largeur. */

  /* ---------- 24.6 Les affiches sur fond noir ----------
     Elles s'empilent, et l'aplat noir garde autour d'elles la marge de la
     maquette : 31,5 px pour 326,5 px de large. */
  .posters {
    padding: 10.7% 9.65%;
    gap: 6.6%;
  }

  /* ---------- 24.7 Autres projets ----------
     Trois vignettes sur une ligne, comme sur la maquette. */
  /* Cette marge se confond avec celle du visuel qui précède : c'est la plus
     grande des deux qui l'emporte, d'où la valeur pleine et non un reste. */
  .more { margin-top: clamp(26px, 8.7vw, 46px); }

  .more__title {
    gap: clamp(10px, 3.3vw, 20px);
    margin-bottom: clamp(8px, 2.8vw, 18px);
    font-size: clamp(10.5px, 3.2vw, 16px);
  }

  /* la rangée de trois et le retrait des deux dernières vignettes sont écrits
     à la bascule des 1023px : ils valent pour la tablette comme pour ici */

  /* ---------- 24.8 Pied de page ----------
     La bande noire garde ses trois temps, mais tout se range à gauche :
     l'appel et son bouton, puis les coordonnées et les savoir-faire, puis la
     navigation sous son filet. */
  .footer {
    grid-template-columns: 1fr;
    margin-top: clamp(14px, 5.28vw, 28px);
    padding-top: clamp(16px, 5.5vw, 30px);
    padding-bottom: clamp(20px, 7.6vw, 40px);
  }

  .footer__title {
    font-size: clamp(27px, 8.56vw, 45px);   /* capitale 22px @360 */
    line-height: 1.16;
  }

  .footer__aside {
    justify-self: start;
    text-align: left;
    margin-top: clamp(18px, 6.4vw, 34px);
  }

  .footer__savoir { margin-top: 1.6em; }

  .footer__nav { margin-top: clamp(18px, 6.4vw, 34px); }

  /* le petit texte reprend l'échelle du téléphone */
  .footer { font-size: var(--fs-ui); }

  /* ---------- 24.9 Page projet CCNN (maquette p.2) ----------
     La page suit la charpente commune ; seuls le titre de couverture et le
     rythme vertical lui sont propres. Les valeurs sont relevées sur la
     maquette et exprimées en marges pleines : chaque marge se confond avec
     celle du bloc précédent, c'est la plus grande qui compte. */

  /* « CCNN » garde l'échelle commune ; la parenthèse, elle, est ici
     nettement plus grosse que sur grand écran : capitale de 10,5px pour
     16,4px au titre, et une ligne posée bas. */
  .cover--tel .cover__title--ccnn .cover__line--sub {
    font-size: 0.641em;
    line-height: 1.51;
    /* La parenthèse est presque collée au sigle sur la maquette : l'interligne
       large sert à espacer ses deux lignes entre elles, pas à l'éloigner de
       « CCNN ». La remontée, en em, suit le corps. */
    margin-top: -0.375em;
    /* La maquette coupe après « chorégraphique ». Le Helvetica du site est
       plus étroit que la fonte du dessin et ferait tenir un mot de plus :
       cette largeur ramène le retour au même endroit, à toutes les tailles
       d'écran puisque le corps suit lui aussi la largeur. */
    max-width: 68%;
  }

  .shot--ccn-foule     { margin-top: clamp(18px, 6.33vw, 34px); }
  .row--ccn-concept    { margin-top: clamp(19px, 6.56vw, 35px); }
  .shot--ccn-triptyque { margin-top: clamp(16px, 5.61vw, 30px); }
  .row--ccn-coul       { margin-top: clamp(16px, 5.44vw, 30px); }
  .shot--ccn-lecture   { margin-top: clamp(17px, 5.92vw, 32px); }
  .shot--ccn-chaise    { margin-top: clamp(10px, 3.33vw, 18px); }
  .row--ccn-cap2       { margin-top: clamp(6px,  2.11vw, 12px); }
  .shot--ccn-mailing   { margin-top: clamp(19px, 6.47vw, 35px); }
  .duo--ccn            { margin-top: clamp(19px, 6.53vw, 35px); }

  /* ---------- 24.10 Page projet « Visible, Invisible » (maquette p.3) ----------
     La page est la plus simple des trois : une couverture, deux blocs de
     texte, trois visuels. Seuls le titre et quatre respirations lui sont
     propres. */

  /* Le titre tient sur une ligne et la maquette le compose sans interlettrage
     — c'est l'écart de la fonte qui donne la largeur relevée sur le dessin,
     204px pour « Visible, Invisible ». La marge du dessous remplace la
     deuxième ligne que les autres couvertures ont sous leur titre. */
  .cover--tel .cover__title--ink {
    letter-spacing: normal;
    margin-bottom: clamp(6.5px, 1.84vw, 11px);
  }

  .shot--large       { margin-top: clamp(22px, 6.23vw, 37px); }
  .duo--vi           { margin-top: clamp(18px, 5.08vw, 30px); }
  .duo--vi + .more   { margin-top: clamp(37px, 10.43vw, 62px); }

  /* ---------- 24.11 Page projet « Localocavore » (maquette p.4) ----------
     La page la plus chargée du lot : une couverture à deux lignes, un
     logotype annoté recomposé, quatre plantes, huit visuels. */

  /* « Festival » est ici bien plus gros que sur grand écran : capitale de
     11,1px pour 15,9 au titre, contre 7,2 pour 16,4 sur l'ordinateur. */
  /* la ligne « Festival » reste au-dessus : c'est le seul titre à deux
     lignes de haut en bas, les autres composent leur sous-titre en dessous */
  .cover--tel .cover__title--loca .cover__line--sup {
    display: block;
    font-size: 0.7em;
  }

  /* la maquette compose ce titre sans interlettrage, et le pose deux pixels
     plus haut que les autres */
  .cover--tel .cover__title--loca,
  .cover--tel .cover__title--loca .cover__line--sup { letter-spacing: normal; }

  /* Cette page partage la classe « cover__title--ink » avec Visible,
     Invisible, dont le titre tient sur une seule ligne et réclame une marge
     en dessous. Ici la ligne « Festival » joue ce rôle : la marge est reprise
     à zéro. */
  .cover--tel .cover__title--loca {
    margin-top: clamp(15px, 4.17vw, 25px);
    margin-bottom: 0;
  }

  /* --- Le logotype annoté ---
     La maquette reprend la composition libre plutôt que la pile : les deux
     premières annotations côte à côte, le logotype au centre, la troisième
     et la carte en dessous, et trois traits au lieu de quatre. Les repères
     sont relevés dans un cadre de 324 × 406 px — celui du second tracé. */
  .diagram--loca {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 324 / 406;
    margin: clamp(54px, 15.03vw, 90px) 0 clamp(30px, 8.34vw, 50px);
    line-height: 1.2;
  }

  .diagram--loca .diagram__lines      { display: none; }
  .diagram--loca .diagram__lines--tel { display: block; }

  .diagram--loca .diagram__logo,
  .diagram--loca .diagram__carte,
  .diagram--loca .diagram__note {
    position: absolute;
    right: auto;
    left: auto;
    top: auto;
  }

  .diagram--loca .diagram__note { text-align: left; }

  .diagram--loca .diagram__logo--loca {
    left: 16.98%;
    top: 28.57%;
    width: 66.17%;
    transform: none;
  }
  .diagram--loca .diagram__carte      { left: 63.58%; top: 72.29%; width: 34.88%; }

  /* Les largeurs ne sont pas décoratives : ce sont elles qui décident du
     nombre de lignes, et donc de la hauteur des annotations. Elles sont
     réglées pour retrouver les trois, cinq et cinq lignes de la maquette. */
  .diagram--loca .diagram__note--lh { left:  0.93%; top:  5.38%; width: 35%; }
  .diagram--loca .diagram__note--lb { left: 55.70%; top:  0;     width: 46%; }
  .diagram--loca .diagram__note--ld { left:  0.93%; top: 71.64%; width: 52%; }

  /* --- La liste à puces du bloc « concept » ---
     La maquette aère nettement les quatre items : seize pixels entre eux,
     là où la feuille de style n'en laissait qu'un. */
  .row__list      { margin: clamp(11px, 3.17vw, 19px) 0 clamp(10.5px, 2.94vw, 18px); }
  .row__list li + li { margin-top: clamp(15px, 4.27vw, 26px); }

  /* --- Les quatre plantes ---
     Sur téléphone la maquette ne les range pas en grille : elle garde la
     composition libre du grand écran, deux par deux, à leurs tailles
     propres — le tulipier déborde même légèrement à gauche. Les repères
     sont relevés dans un cadre de 324 × 410 px. */
  .plantes {
    display: block;
    position: relative;
    aspect-ratio: 324 / 410;
    margin-top: clamp(22px, 6.32vw, 38px);
  }

  .plante {
    position: absolute;
    bottom: auto;
    margin: 0;
    text-align: center;
  }

  .plante img { max-width: none; width: 100%; }

  /* les quatre légendes tiennent sur une ligne, comme sur le dessin */
  .plante figcaption { white-space: nowrap; }

  .plante--1 { left:  0.46%; top:  3.17%; width: 47.99%; }
  .plante--2 { left: 64.04%; top:     0%; width: 27.78%; }
  .plante--3 { left: -2.31%; top: 57.07%; width: 55.09%; }
  .plante--4 { left: 62.50%; top: 59.51%; width: 36.73%; }

  /* Les deux légendes d'une même rangée sont alignées entre elles, alors que
     les dessins n'ont ni la même hauteur ni le même bas : chacune reçoit donc
     sa propre marge. */
  .plante--1 figcaption { margin-top: clamp(16px,   4.63vw, 28px); }
  .plante--2 figcaption { margin-top: clamp(15px,   4.34vw, 26px); }
  .plante--3 figcaption { margin-top: clamp(19px,   5.49vw, 33px); }
  .plante--4 figcaption { margin-top: clamp(31px,   8.76vw, 53px); }

  /* --- Le rythme des visuels --- */
  .shot--loca1 { margin-top: clamp(36px, 10.04vw, 60px); }
  /* la légende de l'affiche se rapproche du visuel : la gouttière du bas
     ferait dix pixels de trop */
  .shot--loca2 { margin: clamp(46px, 12.78vw, 77px) var(--pad) 0; }
  .row--loca3  { margin-top: clamp(10px,  2.77vw, 17px); }
  .duo--loca   { margin-top: clamp(28px,  7.89vw, 47px); }

  /* le téléphone et la grille Instagram s'empilent, et la maquette leur
     laisse trois fois la gouttière habituelle */
  .duo--loca2 {
    margin-top: clamp(32px, 9.03vw, 54px);
    gap: clamp(41px, 11.53vw, 69px);
  }

  .shot--loca3 { margin-top: clamp(16px, 4.44vw, 27px); }

  .shot--loca3 + .more { margin-top: clamp(28px, 7.93vw, 47px); }

  /* ---------- 24.12 Page projet « Vinyle » (maquette p.5) ----------
     La page la plus courte du lot : une couverture, un cartouche, un brief
     d'une phrase et trois visuels. Tout tient dans la charpente commune ;
     seuls la couverture, le recadrage de la mise en situation et six
     respirations lui sont propres. */

  /* La photographie de couverture est un peu moins haute que sur les autres
     pages : 414 px pour 417. */
  .cover--vin .cover__img { aspect-ratio: 360 / 414; }

  /* « VINYLE » tient sur une ligne et n'a pas de sous-titre : c'est la marge
     qui donne au titre l'air que les autres couvertures trouvent dans leur
     seconde ligne. */
  .cover--tel.cover--vin .cover__title {
    margin-top: clamp(18.4px, 5.133vw, 30.8px);
  }

  /* Le cartouche de cette page respire autrement : plus d'air au-dessus,
     moins en dessous, et le filet remonte d'autant. */
  .row--vin-meta {
    padding: clamp(8.5px, 2.387vw, 14.3px) 0 clamp(5.5px, 1.531vw, 9.2px);
  }

  /* Le brief suit le filet de plus près, et sa phrase se serre contre le mot
     « Brief » : sur la maquette le cartouche est composé plus petit qu'ici,
     et c'est cette hauteur en moins qu'on reprend. */
  .row--vin-meta + .row--rule {
    padding-top: clamp(17.4px, 4.849vw, 29.1px);
    gap: clamp(6.3px, 1.767vw, 10.6px);
  }

  /* Le disque en situation : la maquette le coupe à droite, d'un huitième de
     sa largeur. Le cadre prend donc les proportions du dessin et l'image,
     calée à gauche, laisse déborder ce qui dépasse. */
  .shot--vin-pomme img {
    aspect-ratio: 330 / 249;
    object-fit: cover;
    object-position: left center;
  }

  /* les trois visuels se suivent à la gouttière commune : les marges du grand
     écran sont plus larges que celles du dessin */
  .shot--vin-pomme { margin-top: var(--gap-shot); }

  .duo--vin  { margin-top: clamp(11.7px, 3.277vw, 19.6px); }
  .more--vin { margin-top: clamp(37.5px, 10.43vw, 62.5px); }

  .more--vin .more__title { margin-bottom: clamp(9.3px, 2.59vw, 15.5px); }

  /* ---------- 24.13 Page Portfolio (maquette p.6) ----------
     La grille repasse à deux colonnes — elle n'en gardait qu'une — et les
     cinq rubriques se replient derrière un seul mot, « Filtres », posé à
     droite au-dessus du filet. Le titre, lui, occupe presque toute la
     largeur : capitale de 33px pour 21 auparavant. */

  .pf { padding-top: clamp(13.5px, 3.761vw, 22.6px); }

  .pf__title { font-size: clamp(42px, 13.208vw, 79.1px); }

  /* --- Le dépliant des rubriques ---
     Fermé, c'est le seul état que dessine la maquette : « Filtres » et son
     chevron en gris, soulignés d'un filet, calés sur la marge de droite. */
  .pf__filters {
    margin-top: clamp(21.2px, 5.911vw, 35.4px);
    padding-bottom: clamp(3px, 0.833vw, 5px);
  }

  /* La case à cocher garde l'état ouvert/fermé. Elle reste dans la page —
     donc atteignable au clavier — mais invisible : c'est l'étiquette qui
     porte le dessin, et c'est elle qui reçoit le cadre de focus. */
  .pf__case {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .pf__case:focus-visible + .pf__toggle {
    outline: 2px solid currentColor;
    outline-offset: 6px;
  }

  .pf__toggle {
    display: flex;
    position: relative;
    align-items: center;
    gap: 0.27em;
    width: max-content;
    margin-left: auto;
    padding-bottom: 0.4px;
    color: var(--c-ink-mute);
    /* Le mot s'écrit en capitales, comme les rubriques qu'il déplie, et n'est
       plus souligné. Le corps ne change pas : il était réglé pour que la
       hauteur de capitale tombe à sept pixels, ce qu'elle vaut déjà. */
    text-transform: uppercase;
    font-size: clamp(9.1px, 2.553vw, 15.3px);
    line-height: 1.2;
    cursor: pointer;
  }

  /* Le mot fait sept pixels de haut : la cible tactile, elle, est portée à
     une quarantaine par ce calque transparent, qui ne déplace rien. */
  .pf__toggle::after {
    content: "";
    position: absolute;
    inset: -16px -18px -10px -16px;
  }

  .pf__chevron {
    width: 0.6em;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    transition: transform 0.3s var(--ease);
  }

  .pf__case:checked + .pf__toggle .pf__chevron { transform: rotate(180deg); }

  /* Déplié, la liste vient sous l'étiquette, alignée sur elle, et repousse le
     filet et la grille — comme le menu principal repousse la page. */
  .pf__filter-list { display: none; }

  .pf__case:checked ~ .pf__filter-list {
    /* Les rubriques se suivent sur la ligne, comme partout ailleurs, et non
       plus l'une sous l'autre : la liste reprend la rangée souple du grand
       écran, calée à droite, et se replie d'elle-même quand la largeur ne
       suffit plus. */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: clamp(10px, 2.8vw, 17px);
    /* Le jalon ci-dessous occupe une ligne pour lui seul : il y a donc deux
       interlignes entre les deux lignes visibles, et non un. On les compte
       pour un en n'en demandant que la moitié. */
    row-gap: calc(var(--pf-saut) / 2);
    margin-top: clamp(12px, 3.33vw, 20px);
  }

  /* Les deux lignes ne sont pas laissées au hasard de la place disponible :
     « Web design » et « Social media » passent toujours sous les trois
     premières rubriques. Le jalon est un article de liste vide, large de toute
     la rangée et sans hauteur : il ne se voit pas, il ne fait que renvoyer à
     la ligne ce qui le suit. */
  .pf__case:checked ~ .pf__filter-list .pf__saut {
    display: block;
    flex: 0 0 100%;
    height: 0;
  }

  .pf__filter {
    padding: 4px 0 2px;
    font-size: var(--fs-ui);
  }

  /* --- La grille des projets --- */
  .pf__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 12px de gouttière pour deux colonnes de 156 : les mesures du dessin */
    column-gap: 3.704%;
    row-gap: clamp(28.2px, 7.834vw, 46.9px);
    /* La maquette pose sa première rangée un demi-pixel plus haut que les
       quatre autres, qui, elles, se suivent à intervalle régulier. La grille
       étant régulière, ce sont ces quatre-là qu'on cale. */
    margin: clamp(10.5px, 2.917vw, 17.5px) 0 clamp(54.7px, 15.213vw, 91.2px);
  }

  /* Ces libellés descendaient jusqu'à 7 px sur un téléphone : la mise en page
     tenait, le texte ne se lisait plus. On accepte désormais que l'étiquette
     de « LOCALOCAVORE » passe à la ligne — .pf__meta est déjà en flex-wrap,
     elle le fait proprement — plutôt que de composer la catégorie à une
     taille que personne ne déchiffre. Les valeurs ne descendent plus sous
     11 px, quelle que soit la largeur. */
  .pf__meta {
    gap: 0 clamp(3.1px, 0.972vw, 5.9px);
    margin-top: clamp(3.7px, 1.027vw, 6.2px);
    line-height: 1.2;
  }

  .pf__name { font-size: clamp(13px, 3.4vw, 15.4px); }     /* était 10,0 @390 */

  /* la maquette ne détache pas ces capitales : l'interlettrage du grand écran
     est repris à zéro */
  .pf__tag {
    font-size: clamp(11px, 2.9vw, 12.5px);   /* était 7,3 @390 */
    letter-spacing: normal;
  }

  /* ---------- 24.14 Page projet « Itinéraire dys » (maquette p.7) ----------
     La plus longue page du site. La couverture n'est pas une photo mais un
     aplat orange : il devient un bloc dans le flux et le titre passe dessous,
     en noir, comme partout ailleurs. Le logotype annoté reprend la composition
     libre, les trois photos de chantier se rangent deux puis une, et les deux
     montages de la campagne changent de fichier — ce ne sont pas des
     recadrages mais d'autres mises en page. */

  /* --- La couverture --- */
  .cover--dys.cover--tel {
    aspect-ratio: auto;
    /* la citation, agrandie, déborde du cadre : c'est lui qui la rogne */
    overflow: hidden;
    background: none;
  }

  /* l'aplat orange, dans le flux : le titre vient à sa suite */
  .cover--dys.cover--tel::before {
    content: "";
    display: block;
    aspect-ratio: 360 / 417;
    background: var(--c-dys);
  }

  /* La maquette compose la citation presque bord à bord, bien plus grande que
     sur grand écran. Le fond du fichier est exactement l'orange de l'aplat :
     l'agrandissement ne laisse aucune couture. */
  .cover--dys.cover--tel .cover__art {
    left: -19.27%;
    top: clamp(185.8px, 51.61vw, 309.1px);
    width: 138.06%;
    max-width: none;   /* sinon la borne générale ravale l'agrandissement */
    transform: none;
  }

  .cover--tel .cover__title--dys {
    margin-top: clamp(15.4px, 4.3vw, 25.8px);
    margin-bottom: clamp(9.3px, 2.605vw, 15.6px);
  }

  /* la mention est ici beaucoup plus grosse que sur grand écran : capitale de
     10,6px pour 16 au titre, contre 7,1 pour 46 sur l'ordinateur */
  .cover--tel .cover__title--dys .cover__line--sub {
    font-size: 0.6625em;
    line-height: 1.2526;
  }

  /* --- Le cartouche ---
     Il tient sur une ligne, comme sur la maquette : la colonne de gauche se
     contente de son texte et laisse le reste à celle de droite. La maquette le
     compose aussi plus petit que le reste des petites capitales — capitale de
     5px au lieu de 6,8 — et sans interlettrage ; aux mesures de la feuille de
     style, « Identité visuelle / Édition / Social media » passerait à la
     ligne. */
  .row--dys-meta {
    grid-template-columns: auto 1fr;
    padding-bottom: clamp(8.1px, 2.256vw, 13.5px);
  }

  .row--dys-meta .row__label,
  .row--dys-meta .row__text {
    font-size: clamp(7.2px, 2.001vw, 12px);
    letter-spacing: normal;
  }

  /* --- Les rangées de texte --- */
  .row--rule.row--dys { padding-top: clamp(9.3px, 2.592vw, 15.5px); }

  .row--dys-meta + .row--rule {
    padding-top: clamp(17.4px, 4.849vw, 29.1px);
    gap: clamp(6px, 1.678vw, 10.1px);
  }

  /* Le texte courant de cette page respire plus que les autres — c'est vrai
     aussi sur la maquette téléphone, qui laisse 13px d'interligne là où les
     autres pages en laissent 12,6. */
  .row--dys .row__text { line-height: 1.237; }

  .row--dys .row__text p + p { margin-top: 1.046em; }

  .row--dys { gap: clamp(10.1px, 2.822vw, 16.9px); }

  /* Le logotype annoté garde sa composition libre depuis la bascule à 1023px :
     tout est écrit là-haut, section 12, y compris les deux longueurs du trait
     de la troisième annotation. Le cadre n'est plafonné qu'au-dessus de 600px ;
     ici il occupe toute la largeur. */

  /* --- Le logotype en réserve sur l'aplat --- */
  .band--dys {
    aspect-ratio: 324 / 434;
    padding: 0;
    margin-top: clamp(66.1px, 18.375vw, 110.1px);
  }

  .band--dys .band__logo {
    position: absolute;
    left: 15.32%;
    top: 38.77%;
    width: 69.35%;
    margin: 0;
    /* le centrage par translation d'une demi-largeur ne vaut qu'au-dessus :
       ici les repères de la maquette placent le logotype eux-mêmes */
    transform: none;
  }

  /* --- Les visuels ---
     La maquette leur donne des cadres verticaux là où les photographies du
     site sont panoramiques : le cadre prend les proportions du dessin et
     l'image, recentrée, laisse déborder ce qui dépasse. */
  .shot--dys-bois img {
    aspect-ratio: 324 / 391;
    object-fit: cover;
    object-position: 49.3% center;
  }

  /* Le cadre de la maquette est debout, les quatre photographies sont couchées :
     il n'en reste que cinquante-six pour cent de la largeur. Le même point de
     calage ne peut donc pas servir aux quatre — la troisième y perdait le
     livret tenu à bout de bras, la quatrième son titre. Chacune reçoit le sien,
     relevé sur son propre sujet. */
  .shot--dys-right.diapo img {
    aspect-ratio: 324 / 356;
    object-fit: cover;
    object-position: left center;
  }

  /* le livret tenu en main occupe le milieu du cliché */
  .shot--dys-right.diapo .diapo__suivante:nth-of-type(3) { object-position: center; }

  /* « Quelques ressources clés » commence au tiers */
  .shot--dys-right.diapo .diapo__suivante:nth-of-type(4) { object-position: 30% center; }

  .shot--dys-osb img {
    aspect-ratio: 324 / 280;
    object-fit: cover;
    object-position: 15.5% center;
  }

  .shot--dys-insta img {
    aspect-ratio: 324 / 376;
    object-fit: cover;
    object-position: 63.2% center;
  }

  /* --- Les trois photos de chantier ---
     Deux côte à côte, la troisième en dessous sur toute la largeur. Les deux
     premières gardent leurs proportions propres : ce sont leurs largeurs qui
     s'ajustent pour qu'elles aient la même hauteur. */
  .trio--dys {
    grid-template-columns: 46.9% 51.4%;
    gap: clamp(4.2px, 1.167vw, 7px) 1.7%;
  }

  .trio--dys .shot:nth-child(3) { grid-column: 1 / -1; }

  /* --- Rythme vertical relevé sur la maquette --- */
  .row--dys-pb        { margin-top: clamp(15.5px, 4.306vw, 25.8px); }
  /* la marge du bas est reprise à zéro : la maquette resserre le livret
     contre la photographie qui le précède */
  .shot--dys-bois     { margin: clamp(27.3px, 7.589vw, 45.5px) var(--pad) 0; }
  .shot--dys-right.diapo { margin-top: clamp(11px, 3.056vw, 18.3px); }
  .row--dys-c1        { margin-top: clamp(15.6px, 4.348vw, 26.1px); }
  .trio--dys          { margin-top: clamp(20.3px, 5.647vw, 33.8px); }
  .row--dys-c2        { margin-top: clamp(15.6px, 4.348vw, 26.1px); }
  .shot--dys-osb      { margin-top: clamp(21.3px, 5.925vw, 35.5px); }
  /* la rangée ouvre son bloc : c'est la règle générale des premiers enfants
     de « wrap » qu'il faut battre ici, d'où le sélecteur plus précis */
  .wrap > .row--rule.row--dys-camp { margin-top: clamp(20.5px, 5.694vw, 34.1px); }
  .shot--dys-posts    { margin-top: clamp(21.3px, 5.925vw, 35.5px); }

  /* une carte et deux tiers dans le bandeau : la publication se lit */
  .ruban { --carte: 56cqw; }
  .shot--dys-insta    { margin-top: var(--gap-shot); }
  .shot--dys-linkedin { margin-top: var(--gap-shot); }
  .more--dys          { margin-top: clamp(57.5px, 15.984vw, 95.7px); }
  .more--dys .more__title { margin-bottom: clamp(9.3px, 2.597vw, 15.6px); }

  /* ---------- 24.15 Page projet « Dans'&Co » (maquette p.8) ----------
     Trois blocs changent de composition sur téléphone : le symbole annoté,
     la maquette des formules et le tableau du social media. Les deux
     derniers ne sont pas des recadrages mais d'autres mises en page : ils
     ont leur propre fichier, tiré de la maquette. */

  /* --- La couverture ---
     Le cadrage de la maquette est bien plus haut que le fichier du grand
     écran ne le permet : il vient de la maquette elle-même. */
  .cover--dc.cover--tel .cover__img { aspect-ratio: 360 / 414; }

  .cover--tel .cover__title--dc { margin-top: clamp(19.3px, 5.359vw, 32.1px); }

  /* la mention est ici beaucoup plus grosse que sur grand écran : capitale
     de 11px pour 16 au titre, contre 22 pour 48 sur l'ordinateur */
  .cover--tel .cover__title--dc .cover__line--sup {
    display: block;   /* la règle commune remet les lignes en ligne */
    font-size: 0.686em;
    line-height: 1.1475;
  }

  /* --- Le cartouche ---
     Il tient sur une ligne, comme sur la maquette : la colonne de gauche se
     contente de son texte et laisse le reste à celle de droite. La maquette
     le compose aussi plus petit que le reste des petites capitales —
     capitale de 5px au lieu de 6,8 — et sans interlettrage ; aux mesures de
     la feuille de style, la mention des trois domaines passerait à la
     ligne. */
  .row--dc-meta {
    grid-template-columns: auto 1fr;
    padding: clamp(12.7px, 3.538vw, 21.2px) 0 clamp(8.2px, 2.272vw, 13.6px);
  }

  .row--dc-meta .row__label,
  .row--dc-meta .row__text {
    font-size: clamp(7px, 1.951vw, 11.7px);
    letter-spacing: normal;
  }

  /* --- Les rangées de texte --- */
  .row--dc-meta + .row--rule { padding-top: clamp(17.6px, 4.884vw, 29.3px); }

  /* le texte courant de cette page est un peu plus serré que sur les autres :
     12px d'interligne au lieu de 12,6 */
  .row--dc .row__text { line-height: 1.1416; }

  .row--dc { gap: clamp(6.5px, 1.817vw, 10.9px); }

  /* --- Le logotype annoté ---
     La maquette garde la composition du grand écran : le mot, ses deux
     filets, ses deux repères et la troisième note en dessous. Seul le bloc
     rétrécit, et il n'occupe pas toute la colonne. */
  .diagram--dc1 {
    display: block;
    position: relative;
    width: 89.41%;
    margin: clamp(43.8px, 12.178vw, 72.9px) 0 0 3.546%;
    aspect-ratio: 289.7 / 139.52;
    line-height: 1.147;
  }

  .diagram--dc1 .diagram__lines      { display: none; }
  .diagram--dc1 .diagram__lines--tel { display: block; }

  .diagram--dc1 .diagram__logo,
  .diagram--dc1 .diagram__note {
    position: absolute;
    left: auto;
    top: auto;
  }

  /* les retours de ligne écrits dans le texte reprennent du service : c'est
     eux qui donnent aux annotations leur largeur */
  .diagram--dc1 .diagram__note {
    width: max-content;
    text-align: center;
    transform: translateX(-50%);
  }

  .diagram--dc1 .diagram__note br { display: revert; }

  /* la largeur du grand écran, que la règle des écrans moyens ravale à
     toute la boîte */
  .diagram--dc1 .diagram__logo--dc { top: 5.08%; width: 97.79%; }

  /* le cadre s'étire un peu en hauteur : les repères de la maquette ne
     tombent plus aux pourcentages du grand écran */
  .diagram--dc1 .diagram__note--d1a { left: 24.25%; top: 69.62%; }
  .diagram--dc1 .diagram__note--d1b { left: 86.93%; top: 69.62%; }
  .diagram--dc1 .diagram__note--d1c { left: 63.31%; top: 98.29%; }

  .rule--dc { margin-top: clamp(60.9px, 16.906vw, 101.3px); }

  /* --- Le symbole annoté ---
     Là, la composition change : le symbole passe au-dessus des deux
     annotations, qui descendent l'une sous l'autre à gauche, et le médaillon
     va en bas à droite. Les repères sont relevés dans un cadre de
     324 × 385 px — celui du second tracé. */
  .diagram--dc2 {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 324 / 385;
    margin: clamp(17.5px, 4.861vw, 29.1px) 0 0;
    line-height: 1.147;
  }

  .diagram--dc2 .diagram__lines      { display: none; }
  .diagram--dc2 .diagram__lines--tel { display: block; }

  .diagram--dc2 .diagram__note,
  .diagram--dc2 .diagram__symbole,
  .diagram--dc2 .diagram__esperluette {
    position: absolute;
    left: auto;
    top: auto;
  }

  .diagram--dc2 .diagram__note {
    width: max-content;
    text-align: left;
  }

  .diagram--dc2 .diagram__note br { display: revert; }

  .diagram--dc2 .diagram__note--d2a { left:  0.65%; top:  0.098%; }
  .diagram--dc2 .diagram__note--d2b { left:  5.86%; top: 79.06%;  }

  .diagram--dc2 .diagram__symbole {
    left: 22.59%;
    top:   5.984%;
    width: 55.70%;
  }

  .diagram--dc2 .diagram__esperluette {
    left: 65.57%;
    top:  72.14%;
    width: 33.40%;
  }

  /* --- Les visuels --- */
  .shot--dc1 { margin-top: clamp(51px, 14.167vw, 84.9px); }
  .shot--dc1 > picture img { aspect-ratio: 324 / 290.75; }

  .shot--dc1 .shot__logo--dc { display: none; }

  .shot--dc1 .shot__logo--dc-tel {
    display: block;
    left:  34.568%;
    top:   26.606%;
    width: 31.481%;
  }

  /* la maquette ne montre pas la rangée « gamme chromatique » ; elle est
     gardée, avec le rythme des autres rangées de la page, et tout ce qui
     suit descend d'autant */
  .swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.852%;
    margin-top: clamp(20.5px, 5.694vw, 34.1px);
  }

  /* La maquette du site est un peu plus étroite que l'écran et centrée : la
     règle des écrans moyens la ravalait à la colonne de texte. */
  .shot--dc-web {
    width: 98.3%;
    margin: clamp(32.2px, 8.931vw, 53.5px) auto 0;
  }

  .shot--dc-formules { margin-top: clamp(26.6px, 7.389vw, 44.3px); }
  .shot--dc-formules img { aspect-ratio: 324 / 536.25; }

  .shot--dc-social { margin-top: clamp(48.8px, 13.542vw, 81.1px); }
  .shot--dc-social img { aspect-ratio: 324 / 822.25; }

  /* les deux supports s'empilent, chacun dans le cadre debout de la
     maquette : l'image, recentrée, laisse déborder ce qui dépasse */
  .duo--dc { margin-top: clamp(23.8px, 6.597vw, 39.5px); }

  .shot--dc-pochon img {
    aspect-ratio: 324 / 363;
    object-fit: cover;
    object-position: 16% center;
  }

  .shot--dc-drapeau img {
    aspect-ratio: 324 / 549;
    object-fit: cover;
    object-position: 42% center;
  }

  .more--dc { margin-top: clamp(38.5px, 10.706vw, 64.1px); }
  .more--dc .more__title { margin-bottom: clamp(9.3px, 2.592vw, 15.5px); }

  /* ---------- 24.16 Page projet « Bingo » (maquette p.9) ----------
     Une page de photographies : elles s'empilent toutes sur la largeur de la
     colonne. Deux d'entre elles sont recadrées debout, et la couverture a son
     propre fichier — le cadrage de la maquette est plus haut que celui du
     grand écran ne le permet. */

  .cover--bg.cover--tel .cover__img { aspect-ratio: 360 / 414; }

  .cover--bg.cover--tel .cover__title { margin-top: clamp(18.5px, 5.133vw, 30.8px); }

  /* --- Le cartouche ---
     Comme sur les autres maquettes téléphone, il est composé plus petit que
     le reste des petites capitales — capitale de 5px au lieu de 6,8 — et sans
     interlettrage. */
  .row--bg-meta {
    grid-template-columns: auto 1fr;
    padding: clamp(9.7px, 2.705vw, 16.2px) 0 clamp(8.2px, 2.272vw, 13.6px);
  }

  .row--bg-meta .row__label,
  .row--bg-meta .row__text {
    font-size: clamp(7px, 1.951vw, 11.7px);
    letter-spacing: normal;
  }

  /* --- Les rangées de texte --- */
  .row--bg-meta + .row--rule { padding-top: clamp(17.6px, 4.884vw, 29.3px); }

  .row--bg { gap: clamp(6.5px, 1.817vw, 10.9px); }

  /* 12px d'interligne, et l'alinéa qui suit vaut exactement une ligne */
  .row--bg .row__text { line-height: 1.1416; }
  .row--bg .row__text p + p { margin-top: 1.1416em; }

  /* Les retours de ligne écrits dans le texte servent au grand écran et
     disparaissent ici — sauf ces deux-là, qui ouvrent un alinéa : la maquette
     téléphone les garde. */
  .row--bg .row__text br.br--para { display: revert; }

  /* --- Les visuels, tous sur la largeur de la colonne --- */
  .duo--bg-boite {
    margin-top: clamp(31.7px, 8.811vw, 52.8px);
    gap: clamp(13.8px, 3.833vw, 23px);
  }

  /* la maquette redresse l'étiquette : le cadre prend ses proportions et
     l'image, recentrée, laisse déborder ce qui dépasse */
  .shot--bg-etiquette img {
    aspect-ratio: 324 / 330;
    object-fit: cover;
    object-position: 55.3% center;
  }

  .row--bg-histoire { margin-top: clamp(16.8px, 4.661vw, 27.9px); }

  /* La campagne : les deux photographies tiennent côte à côte. Elles gardent
     le rapport de largeur qu'elles ont sur grand écran (41,50 pour 39,68),
     ce qui leur donne ici presque exactement la même hauteur. */
  .trio--bg {
    margin-top: clamp(25.7px, 7.144vw, 42.8px);
    grid-template-columns: 1.0458fr 1fr;
    gap: var(--gap-shot);
  }

  .trio--bg > :nth-child(2) { grid-column: 2; }

  /* la marge du bas est reprise à zéro : sans quoi elle l'emporterait sur
     l'écart plus court que la maquette laisse avant le kit complet */
  .duo--bg-jeu { margin: var(--gap-shot) var(--pad) 0; }

  .shot--bg-caisse { margin-top: clamp(11.5px, 3.194vw, 19.1px); }

  .shot--bg-caisse img {
    aspect-ratio: 324 / 229;
    object-fit: cover;
    object-position: 34.5% center;
  }

  .more--bg { margin-top: clamp(38.5px, 10.706vw, 64.1px); }
  .more--bg .more__title { margin-bottom: clamp(9.3px, 2.592vw, 15.5px); }
}