/* Style commun des sept grandes pages (accueil, offres, agences, quatre fiches), sorti des pages le 2026-11-01 :
   un seul fichier, gardé par le navigateur d'une page à l'autre. Chargé juste avant les couches de styles/. */
    :root {
      color-scheme: light;
      /* Le noir d'encre et le rouge, sur papier. */
      --bg: #f7f5f1;            /* blanc papier, oklch(0.971 0.006 85) */
      --fg: #1c1917;            /* noir d'encre chaud, oklch(0.216 0.006 56) : 16,06:1 sur le fond, 14,08:1 sur la surface */
      --fg58: #5e5853;          /* texte secondaire, opaque, oklch(0.464 0.011 62) : 6,44:1 sur le fond, 5,64:1 sur la surface, 5,13:1 au survol */
      --line: #d7d2ca;          /* filet, oklch(0.866 0.012 80) */
      --filet-encre: #b1afab;   /* soulignement discret des liens à l'encre */
      --surface: #ebe6de;       /* papier plus soutenu : cartes et fonds de média, oklch(0.927 0.012 80) */
      --surface-forte: #e1dcd2; /* survol des cartes, oklch(0.896 0.015 85) */
      --accent: #a32a1a;        /* rouge, oklch(0.475 0.16 31) : 6,64:1 sur le fond, 5,82:1 sur la surface */
      --accent-fort: #831c0e;   /* survol, oklch(0.401 0.14 31) : 9,02:1 sous un libellé clair */
      --accent-filet: #d4a097;  /* soulignement des liens rouges */
      --sombre: #1c1917;        /* le noir d'encre en aplat : la carte contact */
      --sombre-fort: #312d2a;   /* son survol, oklch(0.30 0.008 59) : 12,53:1 sous le texte clair */
      --sur-sombre: #b6b0a9;    /* texte secondaire sur le noir, oklch(0.76 0.012 72) : 8,14:1, 6,35:1 au survol */
      --courbe: cubic-bezier(0.19, 1, 0.22, 1);
      /* Deux voix. Gestura Text (Sociotype) titre : h1 à h3, titres de cartes et d'étapes.
         Micrograph (Emtype) informe : texte courant, chapôs, étiquettes, manchette, boutons, prix, numéros, légendes, pied.
         Hauteurs d'x presque égales (497 et 490 pour 1000, capitales à 700 toutes deux) : aucun corps n'est
         compensé d'une famille à l'autre. Micrograph, quatre corps en raison 1,17 : 12,5 capitales · 14,5 petit
         (légendes, pied) · 17 texte et prix · 20 chapô ; au téléphone, les capitales des métadonnées passent à 12.
         Graisses : 400 texte, 450 chapô, 500 capitales et prix, 600 nom de la manchette ; le 300 ne sert qu'aux signes : flèches, croix, plus. */
      /* Le métier, posé par data-teinte : une teinte claire par métier. */
      --argile: #eed1c1;  --argile-fort: #e7c4b1;   /* identité typographique */
      --sauge: #d1dcc6;   --sauge-fort: #c5d2b6;    /* identité visuelle */
      --ardoise: #cbdae5; --ardoise-fort: #bbcfde;  /* site internet */
      --teinte: var(--surface);
      --teinte-forte: var(--surface-forte);
      /* replis calés : voir fonts-systeme/fonts.css */
      --titre: 'Micrograph', 'Micrograph Repli', 'Micrograph Repli Arial', 'Helvetica Neue', Arial, sans-serif;
      --texte: 'Micrograph', 'Micrograph Repli', 'Micrograph Repli Arial', 'Helvetica Neue', Arial, sans-serif;
    }
    [data-teinte="typographie"] { --teinte: var(--argile); --teinte-forte: var(--argile-fort); }
    [data-teinte="identite"] { --teinte: var(--sauge); --teinte-forte: var(--sauge-fort); }
    [data-teinte="site"] { --teinte: var(--ardoise); --teinte-forte: var(--ardoise-fort); }
    /* Offres et pied de fiche : sur la surface, le métier se lit à son numéro rouge */
    .offre, .pied-contact { --teinte: var(--surface); --teinte-forte: var(--surface-forte); }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--texte);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.5;
      font-kerning: normal;
      /* la ligature Th de Gestura reste active dans les titres ; Micrograph n'a que fi et fl */
      font-variant-ligatures: common-ligatures;
    }
    a { color: var(--fg); text-decoration: none; }
    /* Au toucher, aucune surbrillance du système : chaque élément touchable a son propre retour au clic (:active) */
    html { -webkit-tap-highlight-color: transparent; }
    /* Sélection : à l'encre sur le papier, papier sur l'encre et sur les images */
    ::selection { background: var(--fg); color: var(--bg); }
    :is(.contact-carte, .pied-contact, .pied-suivant, .bouton-pilule, .fil button.repondu, .refermer, .pilule)::selection,
    :is(.contact-carte, .pied-contact, .pied-suivant, .bouton-pilule, .fil button.repondu, .refermer, .pilule) ::selection { background: var(--bg); color: var(--fg); }

    /* Étiquettes, manchette, boutons, pied : Micrograph Medium en capitales, 12,5 px, approche +0,07 em.
       Le point médian de Micrograph est déjà centré sur les capitales (293 à 408 pour 700) : pas de « case », qu'elle n'a pas. */
    .manchette, .manchette-mobile .nom, .manchette-mobile .ligne2, .fiche, .etiquette, .fiche-infos dt,
    .pilule > span, .bouton-pilule, .retour-etape, .fil .numero, .depot-liste .poids,
    .entree-fiche, .trace-legende, footer.conteneur {
      font-weight: 500;
    }
    /* Les numéros, en rouge : le métier se lit à son numéro et à son titre */
    .entree-numero.etiquette, .offre-numero.etiquette, .num { color: var(--accent); }
    /* Chiffres tabulaires sur les numéros, compteurs et poids : dans Micrograph, tnum ne touche que les dix chiffres. */
    .entree-numero.etiquette, .offre-numero.etiquette, .num, .fil .numero, .depot-liste .poids {
      font-variant-numeric: tabular-nums;
    }

    .conteneur {
      max-width: 1848px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ---- Manchette ---- */
    /* header.conteneur : nécessaire pour l'emporter sur le raccourci padding de .conteneur */
    body { padding-top: 0; }
    header.conteneur {
      position: sticky;
      top: 0;
      z-index: 30;
      max-width: none;
      padding: 20px max(24px, calc((100% - 1800px) / 2)) 10px;
      border-bottom: 1px solid var(--line);  /* le filet du site : une seule épaisseur, une seule teinte */
      background: var(--bg);
    }
    .manchette {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: baseline;
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 21px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--fg58);
    }
    .manchette .gauche {
      grid-column: 1 / 7;
      display: flex;
      align-items: baseline;
      gap: 18px;
    }
    .manchette .droite {
      grid-column: 7 / 13;
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 18px;
    }
    .manchette .nom { color: var(--fg); font-weight: 600; white-space: nowrap; }
    .manchette .nom svg { vertical-align: -1px; margin-right: 8px; }
    .manchette .droite a { color: var(--fg58); }
    .manchette .langue { white-space: nowrap; margin-left: auto; }
    .manchette .langue .active { color: var(--fg); }
    .manchette-mobile { display: none; }

    /* ---- Ouverture (référence : planche éditoriale) ---- */
    .ouverture {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      padding-top: 88px;
      padding-bottom: 32px;
    }
    h1 {
      grid-column: 1 / 9;
      margin: 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: clamp(56px, 5.8vw, 92px);
      line-height: 1.04;
      letter-spacing: -0.02em;
      color: var(--fg);
      text-wrap: pretty;
    }
    .ouverture-titre { grid-column: 1 / 9; }
    /* Accroche et chapôs : Micrograph 450 en gris secondaire. Mesuré sur la page rendue, le 450 gris a la couleur
       typographique du texte à l'encre (13,6 contre 14,2) ; le 400 gris restait 11 % plus clair, le 300 d'avant 25 %. */
    .accroche {
      margin: 32px 0 0;
      max-width: 36em;
      font-size: clamp(20px, 1.6vw, 25px);
      font-weight: 450;
      line-height: 1.5;
      color: var(--fg58);
      text-wrap: balance;
    }
    .parcours {
      grid-column: 10 / 13;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 10px;
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 21px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--fg58);
    }
    .parcours .annee { display: block; color: var(--fg); }
    .parcours .role { display: block; }
    .parcours .detail { display: block; }

    /* ---- Projets ---- */
    .projets {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 48px 40px;
    }
    .carte {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .media {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 1px solid var(--line);
      background: var(--surface);
      overflow: hidden;
    }
    .media video, .media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.02);
    }
    /* survol relevé sur la référence : voile de 40 % de la couleur de fond, 300 ms ease-in-out */
    .media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg);
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
      pointer-events: none;
    }
    .carte:is(:hover, :focus-visible) .media::after { opacity: 0.4; }
    .legende {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 4px;
    }
    .carte h3 {
      margin: 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: 20px;
      line-height: 1.3;
      letter-spacing: -0.005em;
      color: var(--fg);
    }
    /* Exposants (XIIe) : ni Gestura ni Micrograph n'ont de « e » supérieur (leur sups ne couvre que les chiffres).
       Partout la même réduction, titres comme texte, et line-height: 0 : la ligne qui porte l'exposant garde l'interligne. */
    sup { font-size: 0.62em; line-height: 0; vertical-align: 0.45em; }
    .fiche {
      margin: 0;
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 21px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--fg58);
    }

    /* ---- Tuiles des projets : deux par projet, dans la rangée de leur projet (voir .index-projets) ----
       La petite en 8:9 ; la grande, sur deux colonnes, prend la hauteur de la petite. Le lien étendu de la ligne les couvre. */
    .tuile { position: relative; }
    .tuile-media { position: relative; overflow: hidden; aspect-ratio: 8 / 9; background: var(--surface); }
    .tuile.grande { grid-column: span 2; }
    .tuile.grande .tuile-media { aspect-ratio: auto; height: 100%; }
    .tuile picture, .tuile video, .tuile-affiche {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }
    .tuile img, .tuile video { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* une vidéo qui ne se lit pas (format refusé, lecture bloquée) laisse voir son affiche */
    .tuile video.muette { visibility: hidden; }

    /* ---- Curseur pilule ---- */
    .pilule {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 60;
      pointer-events: none;
      will-change: transform;
    }
    .pilule > span {
      display: block;
      padding: calc(12px + 0.1em) 20px calc(12px - 0.1em);
      border-radius: 999px;
      background: var(--sombre);
      color: var(--bg);
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 1;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
      transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), width 0.55s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .pilule .mot { display: inline-block; }
    .pilule .mot.nouveau { animation: motPilule 0.45s cubic-bezier(0.19, 1, 0.22, 1); }
    @keyframes motPilule {
      from { opacity: 0; filter: blur(4px); transform: translateY(5px); }
    }
    /* Une seule typographie de pilule sur tout le site, celle du bouton : sur un fond sombre, seule la couleur change */
    .pilule.claire > span {
      background: var(--bg);
      color: var(--fg);
      box-shadow: 0 4px 18px rgba(28, 25, 23, 0.16);
    }
    .pilule.visible > span {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    @media (hover: hover) and (pointer: fine) {
      .carte { cursor: none; }
    }
    @media (hover: none), (pointer: coarse) {
      .pilule { display: none; }
    }

    /* ---- Surcouche projet ---- */
    .surcouche { position: fixed; inset: 0; z-index: 50; }
    html.js .surcouche[data-prerendu] { display: none; }
    .voile {
      position: absolute;
      inset: 0;
      background: rgba(28, 25, 23, 0.32);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .panneau {
      position: absolute;
      top: 40px;
      left: 50%;
      width: min(1560px, calc(100% - 48px));
      height: calc(100% - 80px);
      transform: translate(-50%, 32px);
      transform-origin: 50% 0;
      background: var(--bg);
      border-radius: 34px;
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .surcouche.ouverte .voile { opacity: 1; transition-duration: 0.4s; }
    /* À l'ouverture, le panneau est opaque dès la première image et monte de 32 px : seul le voile se fond.
       À la fermeture, il se retire en fondu (0,25 s). */
    .surcouche.ouverte .panneau {
      opacity: 1;
      transform: translate(-50%, 0);
      transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), opacity 0s;
    }
    /* entrée du contenu en fondu montée décalée, relevée sur la référence Collins */
    .surcouche.ouverte .fiche-corps > * {
      animation: apparaitre 0.9s cubic-bezier(0.19, 1, 0.22, 1) backwards;
    }
    .surcouche.ouverte .fiche-corps > *:nth-child(1) { animation-delay: 0.06s; }
    .surcouche.ouverte .fiche-corps > *:nth-child(2) { animation-delay: 0.11s; }
    .surcouche.ouverte .fiche-corps > *:nth-child(3) { animation-delay: 0.16s; }
    .surcouche.ouverte .fiche-corps > *:nth-child(n+4) { animation-delay: 0.21s; }
    /* D'une fiche à la suivante, un fondu enchaîné : l'ancienne fiche reste en place, opaque, le temps que la nouvelle
       se compose dessous, puis se fond (0,25 s) ; ni panneau vide ni image figée à mi-chemin */
    .surcouche.ouverte .panneau-contenu.enchaine .fiche-corps > *, .surcouche.ouverte .fiche-sortante .fiche-corps > * { animation: none; }
    .fiche-sortante {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: var(--bg);
      pointer-events: none;
    }
    .fiche-sortante.part { animation: ficheSortir 0.25s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
    @keyframes ficheSortir { to { opacity: 0; } }
    /* le défilement vertical reste au navigateur, le balayage horizontal passe d'une fiche à l'autre */
    .panneau { overflow-x: hidden; touch-action: pan-y pinch-zoom; }
    /* Au pointeur fin, sur les fiches projet, deux flèches en haut à gauche ; la croix reste à droite */
    .fiche-fleches {
      position: sticky;
      top: 16px;
      z-index: 2;
      display: flex;
      justify-content: flex-start;
      gap: 8px;
      height: 36px;
      margin: 16px 0 -52px 16px;
      pointer-events: none;
    }
    /* les flèches sont des croix (classe refermer : aimant, retour au clic), à l'encre sur un cercle blanc.
       Au survol, un aperçu du projet vers lequel elles mènent descend sous le groupe ; il fait partie du bouton. */
    .panneau .fiche-fleches .refermer {
      position: relative;
      top: 0; /* la croix colle à 16 px : en position relative, ce décalage s'ajouterait */
      margin: 0;
      pointer-events: auto;
      background: #fff;
      color: var(--fg);
      transition: scale 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .panneau .fiche-fleches .refermer:hover, .panneau .fiche-fleches .refermer.capte { background: #fff; }
    .fiche-fleches .fleche { display: inline-block; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
    .fiche-fleches .precedente:is(:hover, .capte) .fleche { transform: translateX(-2px); }
    .fiche-fleches .suivante:is(:hover, .capte) .fleche { transform: translateX(2px); }
    /* au-dessus de sa voisine (les boutons du panneau sont tous à 2, comme la croix) */
    .fiche-fleches .refermer:is(:hover, :focus-visible) { z-index: 3; }
    .fiche-fleches .apercu {
      position: absolute;
      top: 36px;
      left: 0;
      width: 248px;
      padding-top: 10px; /* pont entre la flèche et la carte : le survol ne se perd pas en chemin */
      text-align: left;
      text-box: normal;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s 0.3s;
    }
    .fiche-fleches .suivante .apercu { left: -44px; }
    .fiche-fleches .refermer:is(:hover, :focus-visible) .apercu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s;
    }
    html.sans-survol .fiche-fleches .refermer:hover:not(:focus-visible) .apercu { opacity: 0; visibility: hidden; pointer-events: none; }
    .fiche-fleches .apercu-carte { display: block; padding: 8px 8px 18px; border-radius: 22px; background: #fff; }
    .fiche-fleches .apercu img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--surface); }
    .fiche-fleches .apercu-titre { display: block; margin: 14px 8px 0; font-family: var(--titre); font-size: 20px; font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
    .fiche-fleches .apercu .etiquette { margin: 8px 8px 0; }
    .panneau:not(:has(> .panneau-contenu .fiche-pied)) .fiche-fleches { display: none; }
    @media not ((hover: hover) and (pointer: fine)) { .fiche-fleches { display: none; } }
    /* Au doigt, sur les fiches projet, un point par projet, collé en bas du panneau sur une capsule de papier (lisible sur
       une image comme sur le fond) ; la fiche affichée est pleine */
    .fiche-points {
      position: sticky;
      bottom: 10px;
      z-index: 2;
      display: flex;
      gap: 7px;
      width: fit-content;
      height: 18px;
      margin: -18px auto 0;
      padding: 6px 9px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      pointer-events: none;
    }
    .fiche-points span { width: 6px; height: 6px; border-radius: 50%; background: var(--fg); opacity: 0.25; transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
    .fiche-points span.courant { opacity: 1; }
    .panneau:not(:has(> .panneau-contenu .fiche-pied)) .fiche-points { display: none; }
    @media (hover: hover) and (pointer: fine) { .fiche-points { display: none; } }
    @keyframes apparaitre {
      from { opacity: 0; transform: translateY(24px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .pilule > span, .panneau, .voile { transition: none !important; }
      .pilule .mot.nouveau { animation: none; }
      .surcouche.ouverte .fiche-corps > * { animation: none !important; }
      .etape.active, .etape.sortante { animation: none !important; }
      .etape.sortante { visibility: hidden; }
    }
    .refermer {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 999px;
      background: var(--sombre);
      color: var(--bg);
      font-family: var(--texte);
      font-size: 21px;
      font-weight: 300;
      line-height: 1;
      cursor: pointer;
      transition: background 0.25s cubic-bezier(0.19, 1, 0.22, 1), scale 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .refermer:hover, .refermer.capte { background: var(--sombre-fort); }
    .refermer:active { scale: 0.92; }
    .fondu {
      position: sticky;
      z-index: 1;
      display: block;
      height: 72px;
      pointer-events: none;
    }
    /* En haut, une bande de papier opaque sous la croix (16 + 36 px, arrondis à 48), puis un fondu de 24 px :
       le texte ne passe plus sous la croix, et un média sombre ne traîne plus de voile gris sur 72 px */
    .fondu-haut { top: 0; margin-bottom: -72px; background: linear-gradient(var(--bg) 48px, rgba(247, 245, 241, 0)); }
    .fondu-bas { bottom: 0; height: 28px; margin-top: -28px; background: linear-gradient(rgba(247, 245, 241, 0), var(--bg)); }
    /* rayon du panneau = rayon de la croix (18 px) + son retrait (16 px) */
    .panneau .refermer {
      position: sticky;
      top: 16px;
      display: block;
      margin: 16px 16px -52px auto;
      z-index: 2;
    }
    .feuille .refermer {
      position: absolute;
      top: 16px;
      right: 16px;
    }

    /* ---- Fiche projet ---- */
    .fiche-corps {
      padding: 88px 40px 96px;
    }
    .fiche-tete {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
    }
    .fiche-titre { grid-column: 1 / 9; }
    .fiche-corps h2 {
      margin: 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: clamp(52px, 4.72vw, 68px);  /* la courbe du H1 */
      line-height: 1.04;
      letter-spacing: -0.02em;
      color: var(--fg);
      text-wrap: balance;
    }
    .fiche-corps .chapo {
      margin: 40px 0 0;
      max-width: 680px;
      font-size: 20px;
      font-weight: 450;
      line-height: 1.5;
      color: var(--fg58);
      text-wrap: pretty;
    }
    .fiche-corps .lien-site { margin-top: 36px; }
    .fiche-corps .lien-site:hover { text-decoration: none; }
    .fiche-corps figure { margin: 16px 0 0; }
    .fiche-corps .cadre {
      border-radius: 16px;
      aspect-ratio: 16 / 9;
      background: var(--surface);
      overflow: hidden;
    }
    .fiche-corps .cadre img, .fiche-corps .cadre video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .fiche-corps figure.en-tete { margin-top: 64px; }
    .fiche-infos {
      grid-column: 9 / 13;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 24px;
      margin: 0;
      padding-top: 14px;
      font-family: var(--texte);
      font-size: 17px;
      line-height: 1.45;
    }
    .fiche-infos dt { font-size: 12.5px; line-height: 20px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg58); }
    .fiche-infos dd { margin: 2px 0 0; color: var(--fg); }
    .etiquette {
      display: block;
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 20px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--fg58);
    }
    /* Chaque section s'ouvre sur un bloc de texte qui occupe presque l'écran, centré,
       et dont les lignes apparaissent quand il arrive au milieu de la fenêtre. */
    .fiche-corps .texte {
      min-height: 82vh;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      max-width: 640px;
      margin-inline: auto;
      padding: 96px 0;
    }
    .fiche-corps .texte p { max-width: none; }
    .fiche-corps section h3 {
      margin: 20px 0 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: clamp(30px, 2.8vw, 40px);
      line-height: 1.12;
      letter-spacing: -0.012em;
      color: var(--fg);
      text-wrap: balance;
    }
    /* texte de lecture : à l'encre, au corps du texte courant */
    .fiche-corps section p {
      margin: 28px 0 0;
      max-width: 34em;
      font-size: 17px;
      line-height: 1.55;
      color: var(--fg);
      text-wrap: pretty;
    }
    .fiche-corps .mot { transition: opacity 0.12s cubic-bezier(0.19, 1, 0.22, 1); }

    /* ---- Pied de fiche : contact + projet suivant ---- */
    .fiche-pied {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 16px;
      margin-top: 120px;
    }
    /* Sous 900 px, la carte contact en 5/12 ne tient plus « Racontez-moi » et sa flèche touche le titre : les deux cartes s'empilent */
    @media (max-width: 899px) { .fiche-pied { grid-template-columns: minmax(0, 1fr); } .fiche-pied .pied-contact { min-height: 320px; } }
    .pied-contact {
      min-height: 460px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      padding: 40px;
      border: none;
      border-radius: 30px;
      background: var(--sombre);
      color: var(--bg);
      font: inherit;
      text-align: left;
      transition: background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    /* La carte contact du pied des fiches est à l'encre, comme celle de l'accueil et des pages services */
    .pied-contact:hover, .pied-contact.capte { background: var(--sombre-fort); }
    .pied-contact .etiquette { color: var(--sur-sombre); }
    .fiche-pied h3 {
      margin: 20px 0 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: clamp(30px, 3.9vw, 56px);
      line-height: 1.06;
      letter-spacing: -0.012em;
      color: var(--fg);
      text-wrap: balance;
    }
    .fiche-pied p { margin: 20px 0 0; }
    .pied-titre {
      display: block;
      max-width: 12em;
      font-family: var(--titre);
      font-size: clamp(30px, 3.9vw, 56px);
      line-height: 1.06;
      letter-spacing: -0.012em;
      text-wrap: balance;
    }
    .fiche-pied .bouton-pilule { margin-top: 36px; }
    /* Projet suivant : le média occupe le haut de la carte, la légende est composée dessous sur l'aplat d'encre.
       Aucun libellé ne passe sur l'image, ni sur le texte d'une page de site filmée : l'AA ne dépend plus du média. */
    .pied-suivant {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 460px;
      overflow: hidden;
      border-radius: 30px;
      background: var(--sombre);
      transition: filter 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .pied-suivant:hover, .pied-suivant.capte { text-decoration: none; }
    .pied-suivant video {
      position: relative;
      display: block;
      flex: 1 1 0;
      min-height: 0;
      width: 100%;
      object-fit: cover;
      transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    }
    /* une page de site filmée : on en garde le haut (en-tête, image d'ouverture) */
    .pied-suivant video.ecran { object-position: 50% 0; }
    .pied-suivant::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(28, 25, 23, 0.12);
      pointer-events: none;
    }
    .pied-suivant .legende-suivant {
      position: relative;
      z-index: 1;
      display: block;
      padding: 4px 120px 36px 40px;
      background: var(--sombre);
    }
    /* au-dessus de l'étiquette, le média se fond dans l'aplat : pas de bord net. Le fondu mord de 2 px sur l'aplat, plein sur
       ces 2 px : quand l'aimant décale la carte d'une fraction de pixel, la vidéo ne passe plus en liseré au raccord. */
    .pied-suivant .legende-suivant::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% - 2px);
      height: 120px;
      background: linear-gradient(rgba(28, 25, 23, 0), rgba(28, 25, 23, 0.05) 18%, rgba(28, 25, 23, 0.17) 34%, rgba(28, 25, 23, 0.36) 50%, rgba(28, 25, 23, 0.58) 65%, rgba(28, 25, 23, 0.79) 79%, rgba(28, 25, 23, 0.94) 91%, var(--sombre) calc(100% - 2px));
      pointer-events: none;
    }
    .pied-suivant .etiquette, .pied-suivant .fiche, .pied-suivant .fiche .client { color: var(--bg); }
    .pied-suivant h3 { color: var(--bg); margin-top: 12px; }
    .coin-fleche {
      position: absolute;
      right: 36px;
      bottom: 30px;
      z-index: 1;
      font-family: var(--texte);
      font-size: 44px;
      font-weight: 300;
      line-height: 1;
      transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .pied-suivant .coin-fleche { color: var(--bg); }
    .pied-suivant:hover .coin-fleche, .pied-contact:hover .coin-fleche, .contact-carte:hover .coin-fleche, .pied-suivant.capte .coin-fleche, .pied-contact.capte .coin-fleche, .contact-carte.capte .coin-fleche { transform: translateX(10px); }
    /* Captée au pointeur fin, une offre, une carte contact ou le projet suivant montre sa pilule à la place de sa flèche */
    html.curseur-capte :is(.offres .offre, .pied-suivant, .contact-carte, .pied-contact).capte .coin-fleche { opacity: 0; }
    /* le titre du pied (jusqu'à 56 px) garde de l'air au-dessus de la ligne client */
    .pied-suivant .fiche { display: block; margin-top: 18px; }
    .pied-suivant:hover video, .pied-suivant.capte video { transform: scale(1.03); }

    /* ---- Formulaire de contact ---- */
    .bouton-pilule {
      display: inline-block;
      margin-top: 16px;
      padding: calc(15px + 0.1em) 24px calc(15px - 0.1em);
      white-space: nowrap;
      border: none;
      border-radius: 999px;
      background: var(--accent);
      color: var(--bg);
      cursor: pointer;
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 1;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      transition: background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), filter 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .bouton-pilule::after {
      content: '→';
      display: inline-block;
      margin-left: 10px;
      transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .bouton-pilule.lien-site::after { content: '↗'; }
    /* le dernier bouton du formulaire ferme : une croix, qui ne glisse pas au survol */
    .bouton-pilule.fermer::after { content: '×'; position: relative; top: 0.06em; font-size: 1.5em; line-height: 0; }
    .bouton-pilule.fermer:is(:hover, .capte)::after { transform: none; }
    .bouton-pilule, .offres .offre, .pied-contact, .pied-suivant, .contact-carte { position: relative; overflow: hidden; isolation: isolate; }
    /* Curseur : natif sur le texte et les images, la main sur tout ce qui se clique (cartes, boutons, croix, choix,
       tracé) ; la pilule s'ajoute sur les surfaces qui ouvrent une page, posée sur leur flèche. */
    .offres .offre, .pied-contact, .pied-suivant, .contact-carte, .cadre.trace { cursor: pointer; }
    @media (hover: hover) and (pointer: fine) {
      html.curseur-capte, html.curseur-capte * { cursor: pointer !important; }
      html.curseur-capte :is(input, textarea) { cursor: text !important; }
    }
    .bouton-pilule:hover, .bouton-pilule.capte { background: var(--accent-fort); text-decoration: none; }
    .bouton-pilule:hover::after, .bouton-pilule.capte::after { transform: translateX(4px); }
    .bouton-pilule.lien-site:hover::after, .bouton-pilule.lien-site.capte::after { transform: translate(2px, -2px); }
    .bouton-pilule:active, .offres .offre:active, .pied-contact:active, .pied-suivant:active, .contact-carte:active { filter: brightness(0.94); }
    .formulaire { position: fixed; inset: 0; z-index: 70; }
    .feuille {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(680px, calc(100% - 32px));
      max-height: calc(100% - 48px);
      transform: translate(-50%, calc(-50% + 32px));
      opacity: 0;
      background: var(--bg);
      border-radius: 34px;
      transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .formulaire.ouverte .voile { opacity: 1; transition-duration: 0.4s; }
    /* À l'ouverture, la feuille est opaque dès la première image et monte de 32 px : seul le voile se fond */
    .formulaire.ouverte .feuille {
      opacity: 1;
      transform: translate(-50%, -50%);
      transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), opacity 0s;
    }
    .feuille { display: flex; flex-direction: column; height: min(780px, calc(100% - 48px)); max-height: none; overflow: hidden; padding: 64px 48px 40px; }
    .feuille form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    /* Hors téléphone, la feuille garde 780 px tant que ses étapes y tiennent, et prend la hauteur libre quand elles en demandent plus
       (tablette en portrait) : le défilement intérieur ne reste que là où l'écran manque. */
    @media (min-width: 760px) {
      .feuille { height: auto; min-height: min(780px, calc(100% - 48px)); max-height: calc(100% - 48px); }
      .feuille form, .feuille .etapes { flex: 1 1 auto; }
    }

    /* Fil des réponses : chaque case affiche la réponse donnée, et ramène à sa question */
    .fil {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
      margin: 0 0 40px;
      padding: 0;
      list-style: none;
    }
    .fil button {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 64px;
      padding: 10px 12px;
      border: none;
      border-radius: 14px;
      /* une question à venir n'est pas cliquable : une case pleine, qui ne réagit pas */
      background: var(--surface);
      color: var(--fg58);
      font: inherit;
      text-align: left;
      transition: background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .fil .numero { font-family: var(--texte); font-size: 12.5px; letter-spacing: 0.06em; }
    /* Le fil est une rangée de cartes de même hauteur : le numéro en haut, la réponse en bas, sur une ligne (la forme courte) */
    .fil li { display: flex; min-width: 0; }
    .fil button { position: relative; min-width: 0; }
    .fil .valeur { overflow: hidden; font-size: 14.5px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
    .fil button.repondu { background-color: var(--sombre); color: var(--bg); box-shadow: none; }
    .fil button.repondu:not(:disabled) { cursor: pointer; }
    .fil button.repondu:not(:disabled):hover, .fil button.repondu.capte { background-color: var(--surface-forte); color: var(--fg); }
    .fil button.repondu:not(:disabled):active { filter: brightness(0.94); }
    .fil button.courant, .fil button.repondu.courant { background-color: var(--surface-forte); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
    .fil button.courant .numero { color: var(--accent); }
    .fil button.repondu.courant:hover, .fil button.repondu.courant.capte { background-color: var(--surface-forte); }

    /* 6 px d'air autour des étapes (rendus aussitôt par la marge) : l'anneau de focus des choix (2 px, décalé de 3 px) n'est plus rogné */
    .etapes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); margin: -6px; padding: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
    .etape { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; visibility: hidden; }
    /* D'une étape à l'autre, un fondu enchaîné avec un glissement latéral de 16 px (dans l'autre sens au retour) :
       la sortante part pendant que l'entrante arrive, sans écran vide ni barre de défilement */
    .etape.active { visibility: visible; animation: etapeEntrer 0.45s cubic-bezier(0.19, 1, 0.22, 1) backwards; }
    .etape.sortante { visibility: visible; pointer-events: none; animation: etapeSortir 0.2s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
    .etapes.recule .etape.active { animation-name: etapeRevenir; }
    .etapes.recule .etape.sortante { animation-name: etapeReculer; }
    @keyframes etapeEntrer { from { opacity: 0; transform: translateX(16px); } }
    @keyframes etapeRevenir { from { opacity: 0; transform: translateX(-16px); } }
    @keyframes etapeSortir { to { opacity: 0; transform: translateX(-16px); } }
    @keyframes etapeReculer { to { opacity: 0; transform: translateX(16px); } }
    .etape h3 {
      margin: 16px 0 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: 36px;
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: var(--fg);
      text-wrap: balance;
    }
    .etape p { margin: 20px 0 0; max-width: 30em; font-size: 17px; line-height: 1.55; color: var(--fg58); text-wrap: pretty; }
    /* « Racontez-moi ce / que vous cherchez / à résoudre. » : 9 em de mesure, une seule coupe possible en trois lignes */
    .etape[data-etape="intro"] h3 { max-width: 9em; }
    .reponse { align-self: stretch; margin-top: 28px; }
    .reponse > p:first-child { margin-top: 0; }

    .options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .options button, .depot-zone {
      position: relative;
      border: none;
      border-radius: 30px;
      background-color: var(--surface);
      color: var(--fg);
      font: inherit;
      cursor: pointer;
      transition: background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s cubic-bezier(0.19, 1, 0.22, 1), filter 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .options button {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 20px;
      min-height: 108px;
      padding: 16px 44px 18px 20px;
      text-align: left;
      font-size: 17px;
      line-height: 1.35;
    }
    .options button:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 76px; }
    .options button::after {
      content: '→';
      position: absolute;
      right: 18px;
      bottom: 16px;
      font-size: 20px;
      line-height: 1;
      opacity: 0;
      transform: translateX(-8px);
      transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    /* Survol : un filet d'encre, le fond ne bouge pas. Le fond fort et la case pleine sont réservés au choix fait. */
    .options button.capte { box-shadow: inset 0 0 0 1px var(--fg); }
    .options button:is(.capte, :focus-visible)::after { opacity: 1; transform: none; }
    @media (hover: hover) {
      .options button:hover { box-shadow: inset 0 0 0 1px var(--fg); }
      .options button:hover::after { opacity: 1; transform: none; }
    }
    .options button:active, .depot-zone:active { filter: brightness(0.94); }

    /* Choix multiples : chaque carte se coche et se décoche, une case carrée remplace la flèche ;
       cochée, la carte prend le fond fort et la case se remplit d'encre, la coche découpée dedans */
    .options.multiple button::after {
      content: '';
      right: 18px;
      bottom: 16px;
      width: 18px;
      height: 18px;
      border: 1.5px solid var(--fg58);
      border-radius: 4px;
      opacity: 1;
      transform: none;
      transition: background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .options.multiple button[aria-pressed="true"] { background-color: var(--surface-forte); }
    .options.multiple button[aria-pressed="true"]::after {
      border-color: var(--fg);
      background: var(--fg);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M4 0h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zM4.2 9.3l1.4-1.4 2.1 2.1 4.7-4.7 1.4 1.4-6.1 6.1z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M4 0h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zM4.2 9.3l1.4-1.4 2.1 2.1 4.7-4.7 1.4 1.4-6.1 6.1z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }
    .pied-formulaire .bouton-pilule:disabled { cursor: default; }

    /* Dépôt de documents */
    .depot-zone {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 148px;
      padding: 18px 20px;
    }
    .depot-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .depot-titre { font-size: 17px; }
    .depot-zone .coin-plus {
      position: absolute;
      right: 18px;
      bottom: 12px;
      font-size: 34px;
      font-weight: 300;
      line-height: 1;
      transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .depot-zone:hover, .depot-zone.capte, .depot-zone.survol, .depot-zone:focus-within { background-color: var(--surface-forte); }
    .depot-zone:hover .coin-plus, .depot-zone.capte .coin-plus, .depot-zone.survol .coin-plus { transform: rotate(90deg); }
    .depot-liste { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
    .depot-liste:empty { display: none; }
    .depot-liste li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 8px 8px 16px;
      border-radius: 14px;
      background: var(--surface);
      font-size: 14.5px;
      animation: apparaitre 0.5s cubic-bezier(0.19, 1, 0.22, 1) backwards;
    }
    .depot-liste .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .depot-liste .poids { font-family: var(--texte); font-size: 12.5px; letter-spacing: 0.04em; color: var(--fg58); }
    .depot-liste .retirer {
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: var(--bg);
      color: var(--fg);
      font: inherit;
      line-height: 1;
      cursor: pointer;
      transition: background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .depot-liste .retirer:hover { background: var(--sombre); color: var(--bg); transform: rotate(90deg); }
    .depot-liste .retirer:active { filter: brightness(0.9); }

    .champs { display: flex; flex-direction: column; gap: 14px; }
    .champs .etiquette { margin-bottom: 6px; }
    .champs input, .champs textarea {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid transparent;
      border-radius: 16px;
      background: var(--surface);
      color: var(--fg);
      font: inherit;
      font-size: 17px;
      transition: border-color 0.25s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.25s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .champs input:focus, .champs textarea:focus { outline: none; border-color: var(--fg58); background: var(--bg); }
    .champs input:hover:not(:focus), .champs textarea:hover:not(:focus) { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
    .champs textarea { min-height: 72px; resize: vertical; }
    /* Champ fautif : le filet d'alerte, même au focus ; le message se pose juste sous l'email, dans la même teinte */
    .champs { --alerte: var(--accent); }
    .champs .champ-manquant input, .champs .champ-manquant textarea, .champs .champ-manquant input:focus, .champs .champ-manquant textarea:focus { border-color: var(--alerte); }
    .champs .champ-manquant input:focus-visible, .champs .champ-manquant textarea:focus-visible { box-shadow: 0 0 0 1px var(--alerte); }
    .etape .erreur-envoi { margin: 12px 0 0; min-height: 1lh; font-size: 14.5px; color: var(--accent); }
    .erreur-envoi[hidden] { display: block; visibility: hidden; }
    .etape .champs .erreur-envoi { margin: -6px 0 0; color: var(--alerte); }
    .etape .champs .erreur-envoi[hidden] { display: none; }
    .hp { position: absolute; left: -9999px; top: -9999px; }

    /* Pied du formulaire : toujours au même endroit, quelle que soit l'étape */
    .pied-formulaire { display: flex; align-items: center; gap: 24px; padding-top: 24px; }
    .pied-formulaire .compteur { min-width: 4em; }
    /* Un seul repère d'étape par format : dès 1 100 px, le fil numéroté et nommé ; en dessous, le fil en barres et l'étiquette
       de la question. Le compteur garde sa case dans la grille du pied, vide. */
    .pied-formulaire .compteur { visibility: hidden; }
    @media (max-width: 899px) { .pied-formulaire .compteur { display: none; } }
    @media (min-width: 1100px) {
      .etape:not([data-etape="intro"], [data-etape="confirmation"]) > .etiquette { display: none; }
      .etape:not([data-etape="intro"], [data-etape="confirmation"]) > h3 { margin-top: 0; }
    }
    .pied-formulaire .actions { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    /* un bouton sans objet sort de la ligne (attribut hidden), qui garde la hauteur de la pilule */
    .pied-formulaire .actions { min-height: 42.5px; }
    .pied-formulaire .actions > [hidden] { display: none; }
    .pied-formulaire .bouton-pilule { margin: 0 0 0 auto; white-space: nowrap; }
    /* désactivé : une pilule pleine sur le filet, au secondaire (4,66:1), qui ne réagit pas au survol */
    .pied-formulaire .bouton-pilule:disabled, .pied-formulaire .bouton-pilule:disabled:hover, .pied-formulaire .bouton-pilule.capte:disabled { background: var(--line); color: var(--fg58); filter: none; }
    .pied-formulaire .bouton-pilule:disabled::after { transform: none; }
    .retour-etape {
      border: none;
      background: none;
      cursor: pointer;
      padding: calc(8px + 0.1em) 0 calc(8px - 0.1em);
      font-family: var(--texte);
      font-size: 12.5px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--fg58);
      transition: color 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .retour-etape { white-space: nowrap; }
    .retour-etape::before { content: '←'; display: inline-block; margin-right: 8px; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
    .retour-etape:hover { color: var(--fg); }
    .retour-etape:hover::before { transform: translateX(-4px); }
    .retour-etape:active { color: var(--fg); opacity: 0.8; }

    /* Au bureau, la feuille s'élargit : la question à gauche, la réponse à droite */
    @media (min-width: 900px) {
      .feuille { width: min(1080px, calc(100% - 48px)); padding: 64px 64px 44px; }
      .etape {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 72px;
        align-content: start;
        align-items: start;
      }
      .etape > * { grid-column: 1; }
      .etape > .reponse { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
      .etape h3 { font-size: 40px; }
      /* Au bureau, le corps suit la colonne de la question ((feuille − 72 px) × 5/11) pour que « que vous cherchez »
         (8,36 em) y tienne : 34 px à 900 px, 41 px à 1 024 px, 46 px dès 1 128 px */
      .etape[data-etape="intro"] h3 { font-size: clamp(34px, calc((min(952px, 100vw - 176px) - 72px) * 5 / 11 / 8.6), 46px); }
      .etape[data-etape="confirmation"] h3 { grid-column: 1 / -1; font-size: 56px; }
      .pied-formulaire { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; }
    }

    /* ---- Offres : trois pistes à comparer (?offres=index | cartes | images) ---- */
    section.offres { margin-top: 160px; scroll-margin-top: 120px; }
    /* Titres de section : un seul corps sur tout le site (offres, atelier, .titre-section des pages services),
       32 px jusqu'à 941 px, puis 3,4 vw jusqu'à 50 px */
    .offres-titre, .titre-section {
      margin: 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: clamp(32px, 3.4vw, 50px);
      line-height: 1.06;
      letter-spacing: -0.015em;
    }
    .offre { display: block; color: var(--fg); }
    .offre:hover, .offre.capte { text-decoration: none; }
    .offre h3 {
      margin: 0;
      font-family: var(--titre);
      font-size: 30px;
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }
    .offre p { margin: 12px 0 0; max-width: 420px; color: var(--fg58); text-wrap: pretty; }
    .offre .suite { transition: color 0.25s cubic-bezier(0.19, 1, 0.22, 1); }
    .offre .suite::after {
      content: '→';
      display: inline-block;
      margin-left: 8px;
      transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .offre:hover .suite, .offre.capte .suite { color: var(--fg); }
    .offre:hover .suite::after, .offre.capte .suite::after { transform: translateX(6px); }
    .offre-visuel { display: none; }
    .offre-visuel picture, .offre-visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }

    /* Piste 1, l'index : une ligne par offre, la ligne se teinte au survol */
    .offres[data-piste="index"] .offres-grille { margin-top: 32px; border-top: 1px solid var(--line); }
    .offres[data-piste="index"] .offre {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: baseline;
      padding: 32px 16px;
      border-bottom: 1px solid var(--line);
      transition: background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1), padding 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .offres[data-piste="index"] .offre-numero { grid-column: 1 / 2; }
    .offres[data-piste="index"] .offre-texte { grid-column: 2 / 11; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 24px; align-items: baseline; }
    .offres[data-piste="index"] .offre h3 { grid-column: 1 / 5; font-size: clamp(28px, 2.4vw, 36px); }
    .offres[data-piste="index"] .offre p { grid-column: 5 / 10; margin: 0; }
    .offres[data-piste="index"] .suite { grid-column: 11 / 13; justify-self: end; }
    .offres[data-piste="index"] .offre:hover, .offres[data-piste="index"] .offre.capte { background: var(--surface); padding-left: 28px; padding-right: 28px; }

    /* Piste 2, les cartes : trois aplats clairs aux coins du panneau de fiche */
    .offres[data-piste="cartes"] .offres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
    .offres[data-piste="cartes"] .offre {
      display: flex;
      flex-direction: column;
      min-height: 280px;
      padding: 32px;
      border-radius: 30px;
      background: var(--teinte);
      transition: background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    /* une seule surface pour les trois offres : le métier se lit à son numéro en rouge (règle .offre, plus haut) */
    .offres[data-piste="cartes"] .offre-texte { margin-top: auto; }
    /* la flèche se pose au bout de la ligne du prix : seule cette ligne lui laisse sa place, le chapô garde la largeur de la carte */
    .offres[data-piste="cartes"] .offre-texte .prix { padding-right: 64px; }
    /* la flèche (44 px, centre optique à 0,352 em de sa ligne de base) se centre sur les capitales du prix
       (17 px, ligne de base à 39,6 px du bas de la carte) : 19 px du bas, au lieu de 13 px au-dessus du prix */
    .offres .offre .coin-fleche { bottom: 19px; }
    .offres .offre:hover .coin-fleche, .offres .offre.capte .coin-fleche { transform: translateX(10px); }
    .offres[data-piste="cartes"] .offre:hover, .offres[data-piste="cartes"] .offre.capte { background: var(--teinte-forte); }

    /* Piste 3, les images : chaque offre portée par un projet qui l'illustre */
    .offres[data-piste="images"] .offres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
    .offres[data-piste="images"] .offre-visuel { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
    .offres[data-piste="images"] .offre-visuel img { transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
    .offres[data-piste="images"] .offre:hover .offre-visuel img, .offres[data-piste="images"] .offre.capte .offre-visuel img { transform: scale(1.04); }
    .offres[data-piste="images"] .offre-numero { margin-top: 20px; }
    .offres[data-piste="images"] .offre h3 { margin-top: 6px; }
    .offres[data-piste="images"] .suite { margin-top: 20px; }

    /* ---- Contact en pied d'accueil ---- */
    .contact-accueil {
      margin-top: 0;
      padding-top: 64px;
    }
    .contact-accueil h3 {
      margin: 20px 0 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: clamp(36px, 3.4vw, 50px);
      line-height: 1.06;
      letter-spacing: -0.015em;
      color: var(--fg);
      text-wrap: balance;
    }
    .contact-carte {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      min-height: 420px;
      padding: 40px;
      border: none;
      border-radius: 30px;
      background: var(--sombre);
      color: var(--bg);
      font: inherit;
      text-align: left;
      transition: background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .contact-carte:hover, .contact-carte.capte { background: var(--sombre-fort); }
    .contact-carte .etiquette { color: var(--sur-sombre); }
    .contact-titre {
      display: block;
      font-family: var(--titre);
      font-size: clamp(38px, 3.8vw, 56px);
      line-height: 1.06;
      letter-spacing: -0.018em;
      text-wrap: balance;
      max-width: 13em;
    }
    .contact-carte .coin-fleche { right: 44px; bottom: 36px; font-size: 56px; }

    /* ---- Pied ---- */
    .contact-accueil { padding-bottom: 120px; }
    footer.conteneur {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 24px;
      padding-top: 0;
      padding-bottom: 48px;
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 20px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--fg58);
    }
    footer.conteneur > div {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 24px;
      width: 100%;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }
    footer.conteneur a { color: var(--fg58); transition: color 0.3s cubic-bezier(0.19, 1, 0.22, 1), text-decoration-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
    footer.conteneur a:hover { color: var(--fg); }
    footer.conteneur a:active { color: var(--fg); opacity: 0.8; }
    footer.conteneur .presentation { flex-basis: 100%; margin: 0 0 16px; font-family: var(--texte); font-size: 14.5px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg58); text-wrap: pretty; }
    footer.conteneur .espace { margin-left: auto; }

    /* ---- Une colonne ---- */
    @media (max-width: 1023px) {
      .projets { grid-template-columns: minmax(0, 1fr); gap: 40px; }
      h1 { grid-column: auto; }
      .parcours { grid-column: auto; padding-top: 0; }
      .manchette { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 4px; }
      .manchette .droite { flex-wrap: wrap; }
    }

    /* ---- Mobile ---- */
    @media (max-width: 759px) {
      .accroche { margin-top: 20px; }
      .conteneur { padding: 0 20px; }
      body { padding-top: 0; }
      header.conteneur { padding: 16px 20px 10px; }
      .manchette { display: none; }
      .manchette-mobile { display: block; }
      .manchette-mobile .ligne1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 24px;
      }
      .manchette-mobile .nom {
        font-family: var(--texte);
        font-size: 12.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--fg);
      }
      .manchette-mobile .nom svg { vertical-align: -1px; margin-right: 7px; }
      .manchette-mobile .icones { display: flex; align-items: center; gap: 12px; }
      .manchette-mobile .icones a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: -12px -10px;
        color: var(--fg58);
      }
      .manchette-mobile .ligne2 {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 4px;
        font-family: var(--texte);
        font-size: 12.5px;
        line-height: 20px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--fg58);
      }
      .manchette-mobile .langue .active { color: var(--fg); }
      .manchette-mobile .langue a { color: var(--fg58); }

      .ouverture { padding-top: 56px; padding-bottom: 0; gap: 0; }
      h1 { font-size: 38px; line-height: 1.08; letter-spacing: -0.015em; }
      .parcours {
        gap: 14px;
        margin-top: 40px;
        font-family: var(--texte);
        font-size: 14.5px;
        line-height: 22.5px;
        letter-spacing: 0;
        text-transform: none;
        color: var(--fg);
      }
      .parcours .annee {
        font-family: var(--texte);
        font-size: 12px;
        line-height: 19px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--fg58);
      }
      .parcours .role { color: var(--fg); }
      .parcours .detail { color: var(--fg58); }

      .projets { margin-top: 72px; }
      .carte h3 { font-size: 21px; line-height: 1.26; letter-spacing: 0; margin-bottom: 2px; }
      .fiche { font-size: 12px; line-height: 19px; letter-spacing: 0.06em; }
      .fiche .sep { display: none; }
      .fiche span { display: block; }
      .fiche .client { color: var(--fg); }
      .contact-accueil { padding-bottom: 96px; }
      footer.conteneur { padding-bottom: 32px; font-size: 12px; }
      footer.conteneur .espace { margin-left: 0; width: 100%; }

      .panneau {
        top: 12px;
        width: calc(100% - 16px);
        height: calc(100% - 24px);
      }
      /* Au téléphone, la fiche s'ouvre sur l'image qu'on vient de toucher, pleine largeur, sous la croix et son fondu ;
         viennent ensuite le titre, le chapô, puis la fiche technique */
      .fiche-corps { display: flex; flex-direction: column; padding: 72px 16px 40px; }
      .fiche-corps h2 { font-size: 38px; line-height: 1.08; letter-spacing: -0.015em; }
      .fiche-corps .chapo { margin-top: 28px; }
      .fiche-tete { grid-template-columns: minmax(0, 1fr); }
      .fiche-titre, .fiche-infos { grid-column: auto; }
      .fiche-infos { margin-top: 24px; padding-top: 0; }
      .fiche-corps > figure.en-tete { order: -1; margin-top: 0; }
      .fiche-corps > .fiche-tete { margin-top: 28px; }
      .surcouche.ouverte .fiche-corps > figure.en-tete { animation-delay: 0.06s; }
      .surcouche.ouverte .fiche-corps > .fiche-tete { animation-delay: 0.11s; }
      .fiche-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
      .fiche-corps .texte { min-height: 70vh; padding: 72px 4px; }
      .fiche-corps figure { margin-top: 8px; }
      .fiche-pied { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
      .pied-contact, .fiche-pied .pied-contact { min-height: 280px; padding: 28px; }
      .fiche-pied h3, .pied-titre { font-size: 30px; line-height: 1.15; }
      /* « Racontez-moi ce / que vous cherchez / à résoudre. » : 9 em de mesure donnent ces trois lignes. La flèche (44 px, à 36 px
         du bord) se centre sur la dernière, courte : son milieu optique (0,352 em au-dessus de sa ligne de base) tombe sur
         celui des minuscules de « à résoudre. », à 42 px du bas de la carte, sous la ligne « que vous cherchez ». */
      .pied-titre { max-width: 9em; padding-right: 0; }
      .pied-contact .coin-fleche { bottom: 16px; }
      /* En fin de fiche, le pied tient sous la croix et le fondu du haut (72 px) : la carte « Projet suivant » prend la hauteur
         qui reste dans le panneau (100dvh, moins 24 px de marges, 72 px de fondu, 280 px de contact, 16 px d'écart et 40 px
         de fond), sans dépasser son format 4/5 ni descendre sous 300 px. min-height: 0, sinon les 460 px du bureau l'emportent. */
      .pied-suivant {
        aspect-ratio: auto;
        min-height: 0;
        height: clamp(300px, calc(100vh - 432px), calc((100vw - 48px) * 1.25));
        height: clamp(300px, calc(100dvh - 432px), calc((100vw - 48px) * 1.25));
      }
    }
    /* Téléphone court (moins de 740 px de haut, iPhone SE) : avec son média, la carte « Projet suivant » ne laisserait plus
       le pied sous le fondu ; elle garde sa légende sur l'encre, sans l'image. Contact à 240 px, légende et fond de fiche
       resserrés (fond de 28 px, la hauteur du fondu du bas) : à 375 × 667, le haut du pied tombe sous le fondu du haut (84 px) sur
       les quatre fiches, titre suivant de quatre lignes compris. */
    @media (max-width: 759px) and (max-height: 739px) {
      .pied-contact, .fiche-pied .pied-contact { min-height: 240px; }
      .pied-suivant { height: auto; }
      .pied-suivant video, .pied-suivant .legende-suivant::before { display: none; }
      .fiche-pied .pied-suivant .legende-suivant { padding-top: 20px; padding-bottom: 20px; }
      .fiche-corps { padding-bottom: 28px; }
    }
    /* De 760 à 1 099 px, sept cases ne tiennent plus « Indépendant » ni « Point de départ » : le fil passe en barres, comme au
       téléphone ; les libellés restent lus par les lecteurs d'écran */
    @media (min-width: 760px) and (max-width: 1099px) {
      .fil { gap: 4px; margin-bottom: 32px; }
      .fil button { height: 8px; min-height: 0; padding: 0; border-radius: 4px; }
      .fil button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    }
    @media (max-width: 759px) {
      /* la légende s'aligne sur la carte contact (28 px), la flèche garde sa place */
      .pied-suivant .legende-suivant { padding: 0 72px 28px 28px; }
      .pied-suivant .legende-suivant::before { height: 84px; }
      .feuille { width: calc(100% - 24px); height: calc(100% - 24px); padding: 64px 20px 20px; border-radius: 30px; }
      .fil { gap: 4px; margin-bottom: 28px; }
      .fil button { height: 8px; min-height: 0; padding: 0; border-radius: 4px; }
      .fil button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
      .etape h3 { font-size: 30px; }
      .etape[data-etape="confirmation"] h3 { font-size: 36px; }
      .reponse { margin-top: 20px; }
      .champs { gap: 10px; }
      .pied-formulaire { padding-top: 16px; gap: 12px; }
      .pied-formulaire .compteur { display: none; }
      .pied-formulaire .actions { flex-wrap: wrap; row-gap: 12px; }
      /* au téléphone, les choix passent sur une colonne : le numéro, puis le libellé, la flèche ou la coche au bout */
      .options { grid-template-columns: minmax(0, 1fr); gap: 8px; }
      .options button, .options button:last-child:nth-child(odd) { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 16px; min-height: 0; padding: 18px 52px 18px 20px; }
      .options button::after { bottom: calc(50% - 10px); }
      .options.multiple button::after { bottom: calc(50% - 9px); }
      .contact-accueil { padding-top: 12px; }
      .contact-carte { min-height: 300px; padding: 28px; }
      /* « que vous cherchez » (8,4 em) tient sur une ligne de la carte (100vw − 96 px) : trois lignes comme le pied des fiches,
         34 px dès 390, 31 px à 360 */
      .contact-titre { font-size: clamp(28px, calc((100vw - 96px) / 8.5), 34px); }
      .contact-carte .coin-fleche { right: 24px; bottom: 20px; font-size: 44px; }
      section.offres { margin-top: 96px; }
      .offres[data-piste="index"] .offre { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; }
      .offres[data-piste="index"] .offre-numero, .offres[data-piste="index"] .offre-texte, .offres[data-piste="index"] .suite { grid-column: auto; }
      .offres[data-piste="index"] .offre-texte { display: block; }
      .offres[data-piste="index"] .offre p { margin-top: 8px; }
      .offres[data-piste="index"] .suite { justify-self: start; margin-top: 8px; }
      .offres[data-piste="index"] .offre:hover, .offres[data-piste="index"] .offre.capte { padding-left: 0; padding-right: 0; }
      .offres[data-piste="cartes"] .offres-grille, .offres[data-piste="images"] .offres-grille { grid-template-columns: minmax(0, 1fr); }
      .offres[data-piste="cartes"] .offre { min-height: 280px; }
    }
    @media (min-width: 760px) {
      .fiche span { display: inline; }
    }

    /* ================================================================
       Direction « L'atelier »
       Chaleur et confiance : la personne, la main, la façon de travailler.
       ================================================================ */
    html { scroll-padding-top: 112px; }

    /* Liens dans le texte courant : soulignés, en rouge (6,64:1 sur le fond, 5,82:1 sur la surface) */
    .accroche a, .atelier-texte p a, .preuve a, .etape p a, .fiche-corps section p a, .colophon a, .fiche-infos dd a {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      text-decoration-color: var(--accent-filet);
      color: var(--accent);
      transition: text-decoration-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .accroche a:hover, .atelier-texte p a:hover, .preuve a:hover, .etape p a:hover, .fiche-corps section p a:hover, .colophon a:hover, .fiche-infos dd a:hover { text-decoration-color: currentColor; color: var(--accent-fort); }
    .accroche a:active, .atelier-texte p a:active, .preuve a:active, .etape p a:active, .fiche-corps section p a:active, .colophon a:active, .fiche-infos dd a:active { color: var(--accent-fort); opacity: 0.8; }

    /* Focus visible : un anneau de 2 px à l'encre, décalé de 3 px */
    :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
    .contact-carte:focus-visible, .pied-contact:focus-visible, .pied-suivant:focus-visible, .offres .offre:focus-visible { outline-offset: 4px; }
    .etape h3:focus, .panneau:focus { outline: none; }
    .champs input:focus-visible, .champs textarea:focus-visible { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
    .depot-zone:focus-within { outline: 2px solid var(--fg); outline-offset: 3px; }

    /* ---- Manchette : le nom ramène à l'accueil, les trois métiers mènent aux offres ---- */
    .manchette .nom, .manchette-mobile .nom { text-decoration: none; transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
    .manchette .nom:hover, .manchette-mobile .nom:hover { text-decoration: none; opacity: 0.75; }
    .manchette .droite a, .manchette-mobile .icones a { transition: color 0.3s cubic-bezier(0.19, 1, 0.22, 1), text-decoration-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
    .manchette .droite a:hover, .manchette-mobile .icones a:hover { color: var(--fg); }
    /* Liens de manchette et de pied : du gris à l'encre, sous le filet des métiers et des offres, décalé de 5 px */
    .manchette .droite a, footer.conteneur > div a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent; }
    .manchette .droite a:hover, footer.conteneur > div a:hover { text-decoration-color: currentColor; }
    /* retour au clic : le lien passe à l'encre et pâlit à peine (8,75:1 sur le papier) */
    .manchette .droite a:active, .manchette-mobile .icones a:active, .entree-lien:active { color: var(--fg); opacity: 0.8; }
    /* le nom pâlit au survol (0,75), puis un cran de plus à l'appui (0,65) : 5,24:1 sur ce papier */
    .manchette .nom:active, .manchette-mobile .nom:active { opacity: 0.65; }
    /* Les trois métiers : la signature de la manchette, sans lien */
    .metiers { white-space: nowrap; }
    .insecable { white-space: nowrap; }
    /* Groupe final d'un titre tenu sur une ligne (« pour chaque situation. ») : la dernière ligne n'a jamais un mot seul.
       Sous 375 px, où il ne tiendrait plus dans la colonne, il se coupe normalement. */
    .lie { white-space: nowrap; }
    @media (max-width: 374px) { .lie { white-space: normal; } }

    /* ---- Ouverture : le H1 reste le plus grand texte de la page ; le sceau, à sa gauche, a la hauteur de ses deux lignes ----
       Le sceau prend le corps du H1 (font-size) et son interligne : le monogramme (90,9 sur 105 du dessin) va du haut
       des capitales de la première ligne (0,7 em) à la ligne de base de la seconde, soit un interligne plus une capitale.
       Le dessin déborde de 8 unités au-dessus du monogramme (ses métriques) : le retrait du haut les rattrape. */
    .ouverture { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 56px); align-items: start; padding-top: 136px; padding-bottom: 104px; }
    .ouverture-sceau {
      --interligne: 1.04;
      --largeur-sceau: calc((var(--interligne) + 0.7) * 105 / 90.9 * 1em);
      grid-column: 1; grid-row: 1; justify-self: start;
      padding-top: calc((var(--interligne) - 1.149) / 2 * 1em + 0.234em - var(--largeur-sceau) * 8 / 105);
      font-size: clamp(56px, 5.8vw, 92px);
    }
    .ouverture .sceau-svg { width: var(--largeur-sceau); }
    .ouverture-titre { grid-column: 2; grid-row: 1; }
    .ouverture-titre h1 { grid-column: auto; }
    .sceau { display: block; color: var(--accent); }
    .sceau-svg {
      display: block;
      width: 1.12em;
      height: auto;
      overflow: visible;
    }

    /* Le monogramme et ses tracés : au survol de l'ouverture, le plein devient un contour d'1 px
       et ses quarante points apparaissent, dans l'ordre du dessin. */
    .sceau-plein { fill: currentColor; transition: fill-opacity 0.5s var(--courbe); }
    .sceau-contour {
      fill: none;
      stroke: currentColor;
      stroke-width: var(--trait, 0.45);
      stroke-dasharray: 1 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 0.7s var(--courbe);
    }
    .sceau-metriques {
      fill: none;
      stroke: currentColor;
      stroke-width: 1;
      stroke-dasharray: 2 4;
      vector-effect: non-scaling-stroke;
      opacity: 0;
      transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .sceau-noeuds path {
      fill: none;
      stroke: currentColor;
      stroke-width: 0;
      stroke-linecap: square;
      vector-effect: non-scaling-stroke;
      transition: stroke-width 0.5s var(--courbe);
      transition-delay: calc(var(--i) * 9ms);
    }
    /* Le sceau de l'ouverture ne se dessine plus au survol : il se dessine à l'arrivée (voir plus bas). */
    .sceau:not(.encre):is(:hover, .trace) .sceau-plein { fill-opacity: 0.07; }
    .sceau:not(.encre):is(:hover, .trace) .sceau-contour { stroke-dashoffset: 0; }
    .sceau:not(.encre):is(:hover, .trace) .sceau-metriques { opacity: 0.3; }
    .sceau:not(.encre):is(:hover, .trace) .sceau-noeuds path { stroke-width: 4px; }

    /* Le sceau de l'ouverture se dessine à l'arrivée (2026-10-28), par le même script que les signes des fiches
       (dessinerSigne). Ses tracés d'origine ne servent plus ; seuls les métriques s'allument pendant le dessin. */
    .sceau.encre :is(.sceau-contour, .sceau-noeuds) { display: none; }
    html.js .dessin-attente :is(.sceau-plein, .trace-plein) { opacity: 0; }

    /* ---- Les projets : une rangée par projet, de toute la largeur ----
       Le nom (numéro, flèche, titre, client et périmètre) sur cinq colonnes, ses deux images sur les sept autres.
       Un filet au-dessus de chaque rangée, d'un bord à l'autre de la page comme celui de la manchette, aucun sous la dernière :
       la section sort du conteneur et chaque rangée reprend sa gouttière (--gouttiere). Survolée ou au focus, la rangée
       se rabat, efface les filets qui la bordent, et ses images s'approchent ; la pilule se pose sur la flèche. */
    .projets { display: none; }
    .mode-grille .projets { display: grid; }
    .mode-grille .index-projets { display: none; }
    .index-projets {
      --gouttiere: max(24px, calc((100% - 1800px) / 2));
      max-width: none;
      margin-top: 96px;
      padding: 0;
    }
    .index-projets h2 { padding: 0 var(--gouttiere); }
    .index-projets .index-liste { border-top: 0; }
    .index-projets .entree {
      grid-template-rows: auto auto 1fr auto;
      align-items: start;
      row-gap: 6px;
      padding: 18px var(--gouttiere) 24px;
      border-top: 1px solid var(--line);
      border-bottom: 0;
    }
    .index-projets .entree::after { inset: -1px calc(var(--gouttiere) - 16px); }
    .index-projets .entree-numero { grid-column: 1 / 6; grid-row: 1; }
    .index-projets .entree-titre { grid-column: 1 / 6; grid-row: 2; padding-right: 0; font-size: clamp(26px, 2.1vw, 32px); }
    .entree-images {
      grid-column: 6 / 13;
      grid-row: 1 / 4;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 3px;
      /* le clic traverse les images jusqu'au lien étendu, même pendant la pression (le lien à 0,8 d'opacité passe dessous) */
      pointer-events: none;
    }
    /* la flèche (et la pilule qui s'y pose) en bas à droite de la rangée, sous les images */
    .index-projets .entree .coin-fleche { grid-column: 12 / 13; grid-row: 4; justify-self: end; align-self: end; margin-top: 14px; line-height: 1; }
    /* La fiche du projet dans une carte légère, comme « Être accompagné » : client, secteur, année, offres, livrables.
       Elle tient le bas de la colonne du nom, à la hauteur de la flèche. */
    .index-projets .entree-fiche {
      grid-column: 1 / 6;
      grid-row: 3 / 5;
      align-self: end;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 24px;
      margin: 20px 0 0;
      padding: 20px 24px 22px;
      border-radius: 30px;
      background-color: var(--surface-legere, var(--surface));
      font-size: 15px;
      line-height: 1.4;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 400;
      color: var(--fg);
      transition: background-color 0.4s var(--courbe);
    }
    .index-projets .entree-fiche > .large { grid-column: 1 / -1; }
    .index-projets .entree-fiche dt { margin: 0 0 2px; }
    .index-projets .entree-fiche dd { margin: 0; text-wrap: pretty; }
    .index-projets .entree-fiche .client { display: block; margin: 0; color: var(--fg); }
    .index-projets .entree-fiche a { text-underline-offset: 3px; }
    .index-projets .entree:is(:hover, :has(.entree-lien:focus-visible)) .entree-fiche { background-color: var(--surface-moyenne, var(--surface-forte)); }
    html.sans-survol .index-projets .entree:hover:not(:has(:focus-visible)) .entree-fiche { background-color: var(--surface-legere, var(--surface)); transition: none; }
    /* les images arrivent à mesure qu'elles chargent ; la rangée survolée les approche à peine */
    .tuile picture, .tuile video, .tuile-affiche { opacity: 0; transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 1.4s var(--courbe); }
    .tuile.chargee picture, .tuile.chargee video, .tuile.chargee .tuile-affiche { opacity: 1; }
    .index-projets .entree:is(:hover, :has(.entree-lien:focus-visible)) .tuile :is(picture, video, .tuile-affiche) { transform: scale(1.035); }
    html.sans-survol .index-projets .entree:hover:not(:has(:focus-visible)) .tuile :is(picture, video, .tuile-affiche) { transform: none; }
    /* ---- Sous 1 024 px : le nom, sa fiche, puis ses deux images, la flèche en bas à droite ---- */
    @media (max-width: 1023px) {
      .index-projets .entree { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-bottom: 24px; }
      .index-projets .entree::after { inset: -1px calc(var(--gouttiere) - 12px); }
      .index-projets .entree-titre { grid-column: 1; grid-row: 1; }
      .index-projets .entree-fiche { grid-column: 1; grid-row: 2; align-self: start; margin-top: 12px; }
      .entree-images { grid-column: 1; grid-row: 3; align-self: start; margin-top: 14px; }
      .index-projets .entree .coin-fleche { grid-column: 1; grid-row: 4; margin-top: 12px; }
    }
    section.offres { margin-top: 136px; }
    .index-liste { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .entree {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: 24px;
      align-items: baseline;
      padding: 26px 0 28px;
      border-bottom: 1px solid var(--line);
    }
    /* Le geste des lignes à filets : au survol ou au focus, le titre glisse, la flèche avance et la pilule se pose sur elle.
       Ni surface ni rabat : une surface qui apparaît sous une ligne entre deux filets ne tient pas (2026-10-27).
       Les filets restent en place. Seul le focus clavier dessine son anneau, au rayon des cartes. */
    .entree::after {
      content: '';
      position: absolute;
      inset: -1px -16px;
      border-radius: 30px;
      outline: 2px solid var(--fg);
      outline-offset: 3px;
      opacity: 0;
      pointer-events: none;
    }
    /* Focus écrit avec :has() ; sans lui (Firefox avant 121, Safari avant 15.4), il passe par :focus-within (repli ci-dessous) */
    .entree:has(.entree-lien:focus-visible)::after { opacity: 1; }
    @supports not selector(:has(a)) {
      .entree:focus-within::after { opacity: 1; }
    }
    .entree-numero { grid-column: 1 / 2; }
    .entree-titre {
      grid-column: 2 / 8;
      margin: 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: clamp(26px, 2.3vw, 36px);
      line-height: 1.12;
      letter-spacing: -0.015em;
      text-wrap: balance;
    }
    /* Seul le texte du titre glisse : un titre transformé deviendrait le bloc conteneur du lien étendu (.entree-lien::after),
       qui ne couvrirait plus que lui. La ligne entière reste cliquable pendant le survol, flèche comprise. */
    .entree-glisse { display: block; transition: transform 0.6s var(--courbe); }
    .entree:is(:hover, :has(.entree-lien:focus-visible)) .entree-glisse { transform: translateX(10px); }
    .entree-lien, .entree-lien:hover { color: var(--fg); text-decoration: none; }
    .entree-lien::after { content: ''; position: absolute; inset: 0; z-index: 1; }
    .entree-lien:focus-visible { outline: none; }
    .entree-fiche {
      grid-column: 8 / 11;
      margin: 0;
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 20px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--fg58);
    }
    .entree-fiche .client { display: block; margin-bottom: 2px; color: var(--fg); }
    .entree-fiche a {
      position: relative;
      z-index: 2;
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      text-decoration-color: var(--filet-encre);
      transition: color 0.3s cubic-bezier(0.19, 1, 0.22, 1), text-decoration-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .entree-fiche a:hover { color: var(--fg); text-decoration-color: currentColor; }
    .entree-fiche a:active { color: var(--fg); opacity: 0.8; }
    /* la flèche est un élément de grille : son z-index de coin (1) la poserait sur le lien étendu, qu'elle laisse passer */
    .entree .coin-fleche { position: static; grid-column: 12 / 13; justify-self: end; font-size: 32px; pointer-events: none; }
    .entree:is(:hover, :has(.entree-lien:focus-visible)) .coin-fleche { transform: translateX(8px); }
    /* Au tactile, les métiers d'une ligne ne sont plus des cibles de 12 px : toute la ligne ouvre le projet */
    @media (hover: none) and (pointer: coarse) {
      .entree-fiche a { pointer-events: none; text-decoration: none; }
    }

    /* ---- Offres : le prix plancher, dit tout de suite ---- */
    .offres .offre-texte { display: block; }
    .offres .offre .prix {
      display: block;
      margin-top: 18px;
      font-family: var(--texte);
      font-size: 17px;
      font-weight: 500;
      line-height: 1.4;
      /* prix : le style unique des prix du site (accueil, en-tête et cartes tarif des services), Micrograph Medium
         au corps du texte, en bas de casse. Chiffres proportionnels : le 1 tabulaire creuserait « 1 800 ». */
      font-variant-numeric: proportional-nums;
      color: var(--fg);
    }

    /* ---- Sous les cartes : le suivi, puis l'esquisse, en cartes à peine posées ----
       Au repos, une surface très légère, sans filet ; au survol ou au focus, la carte s'affirme (la surface monte d'un étage),
       sans rabat. La flèche et la pilule se calent sur l'arrondi comme sur les grandes cartes d'offres : la flèche à 36 px
       du bord, son centre à 41 px du bas ; au survol, elle avance de 10 px et la pilule la recouvre. */
    .offres-suite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; border-top: 0; }
    .offres-suite > .entree.entree-offre {
      row-gap: 4px;
      padding: 26px 32px 28px;
      border: 0;
      border-radius: 30px;
      background-color: var(--surface-legere, var(--surface));
      transition: background-color 0.4s var(--courbe);
    }
    .offres-suite > .entree::after { inset: 0; }
    .offres-suite > .entree:is(:hover, :has(:is(.entree-lien, .entree-bouton):focus-visible)) { background-color: var(--surface-moyenne, var(--surface-forte)); }
    .offres-suite > .entree:active { background-color: var(--surface-forte); }
    html.sans-survol .offres-suite > .entree:hover:not(:has(:focus-visible)) { background-color: var(--surface-legere, var(--surface)); transition: none; }
    .entree-offre .entree-etiquette { grid-column: 1 / 2; grid-row: 1; }
    .entree-offre .entree-titre { grid-column: 1 / 2; grid-row: 2; font-size: clamp(24px, 1.9vw, 30px); }
    .entree-offre .entree-phrase { grid-column: 1 / 2; grid-row: 3; margin: 0; max-width: 34em; padding-right: 48px; font-size: 17px; line-height: 1.45; color: var(--fg58); text-wrap: pretty; }
    .entree-offre .entree-phrase .prix { display: block; margin-top: 2px; }
    .offres-suite > .entree .coin-fleche { position: absolute; grid-area: auto; right: 36px; bottom: 27px; font-size: 28px; line-height: 1; }
    .offres-suite > .entree:is(:hover, :has(:is(.entree-lien, .entree-bouton):focus-visible)) .coin-fleche { transform: translateX(10px); }
    html.sans-survol .offres-suite > .entree:hover:not(:has(:focus-visible)) .coin-fleche { transform: none; }
    .offres-suite > .entree:is(:hover, :has(:is(.entree-lien, .entree-bouton):focus-visible)) .entree-glisse { transform: none; }
    /* en bloc : la ligne de base du titre reste celle de sa première ligne, comme pour un lien */
    .entree-bouton {
      display: block;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      letter-spacing: inherit;
      color: var(--fg);
      text-align: left;
      cursor: pointer;
    }
    .entree-bouton::after { content: ''; position: absolute; inset: 0; z-index: 1; }
    .entree-bouton:focus-visible { outline: none; }
    .entree-bouton:active { color: var(--fg); opacity: 0.8; }
    .entree:has(.entree-bouton:focus-visible)::after { opacity: 1; }
    .entree:has(.entree-bouton:focus-visible) .entree-glisse { transform: translateX(10px); }
    .entree:has(.entree-bouton:focus-visible) .coin-fleche { transform: translateX(8px); }
    /* Dès 1 024 px, les deux cartes côte à côte ; le titre de la seconde s'aligne sur celui de la première */
    @media (min-width: 1024px) {
      .offres-suite { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 6px 16px; }
      .offres-suite > .entree.entree-offre { grid-row: span 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
    }
    /* la pilule se pose sur la flèche, en bas à droite : la fin de la phrase reste à découvert */
    @media (hover: hover) and (pointer: fine) and (min-width: 760px) {
      .offres-suite .entree-phrase { max-width: min(34em, calc(100% - 150px)); padding-right: 0; }
      .offres-suite .entree-titre { padding-right: 0; }
    }
    @media (max-width: 759px) {
      .offres-suite > .entree.entree-offre { padding: 24px 24px 26px; }
      .entree-offre .entree-phrase .prix { margin-top: 4px; }
      /* sous 760 px, la ligne ne porte pas de pilule : le titre reprend toute sa colonne */
      .entree-offre .entree-titre { padding-right: 0; }
    }

    /* ---- L'atelier : la personne, la main, la façon de travailler ---- */
    .atelier { margin-top: 136px; }
    .atelier-panneau {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      padding: 48px;
      border-radius: 30px;
      background: var(--surface);
    }
    /* Grain de papier, à peine visible : la matière, sans image à charger */
    .atelier-panneau::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.098 0 0 0 0 0.09 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      opacity: 0.16;
      pointer-events: none;
    }
    .atelier-portrait { grid-column: 1 / 6; align-self: start; margin: 0; }
    .atelier-portrait .cadre {
      aspect-ratio: 4 / 5;
      border-radius: 16px;
      overflow: hidden;
      background: var(--surface-forte);
    }
    .atelier-portrait img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 44%;
      transform: scale(1.06);
      transition: transform 1.8s var(--courbe);
    }
    .atelier.visible .atelier-portrait img, html:not(.js) .atelier-portrait img { transform: none; }
    .atelier-portrait figcaption {
      margin-top: 12px;
      font-family: var(--texte);
      /* légende : Micrograph au petit corps, comme celles des projets */
      font-size: 14.5px;
      line-height: 1.4;
      color: var(--fg58);
    }
    .atelier-texte { grid-column: 7 / 13; align-self: start; }
    .atelier-recit > p {
      margin: 30px 0 0;
      max-width: 33em;
      font-size: 17px;
      line-height: 1.55;
      color: var(--fg);
      text-wrap: pretty;
    }
    .atelier-parcours {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px 24px;
      margin: 44px 0 0;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }
    .atelier-parcours dd { margin: 6px 0 0; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--fg); text-wrap: balance; }
    .atelier-parcours dd span { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 400; line-height: 1.4; color: var(--fg58); }
    /* h3 en étiquette : la graisse des étiquettes, pas le gras du h3 */
    .facon-titre { margin: 0; font-weight: 500; }
    .facon {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 32px 24px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }
    .facon li { padding-top: 16px; border-top: 1px solid var(--line); }
    .facon p {
      margin: 12px 0 0;
      font-family: var(--texte);
      font-size: 17px;
      line-height: 1.5;
      color: var(--fg);
      text-wrap: pretty;
    }
    .facon p a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--accent-filet); transition: text-decoration-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
    .facon p a:hover { color: var(--accent-fort); text-decoration-color: currentColor; }
    .facon p a:active { color: var(--accent-fort); opacity: 0.8; }
    /* La preuve, juste sous le titre de l'atelier, à l'encre : le premier fait qu'on lit */
    .preuve {
      margin: 30px 0 0;
      max-width: 33em;
      font-size: 17px;
      line-height: 1.55;
      color: var(--fg);
      text-wrap: pretty;
    }
    .preuve a { color: var(--accent); white-space: nowrap; }
    .preuve a::after { content: '→'; display: inline-block; margin-left: 8px; transition: transform 0.5s var(--courbe); }
    .preuve a:hover::after { transform: translateX(4px); }

    /* ---- Apparitions au défilement, posées ---- */
    @media (prefers-reduced-motion: no-preference) {
      html.js .apparait { opacity: 0; transform: translateY(12px); transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s var(--courbe); }
      html.js .apparait.visible { opacity: 1; transform: none; }
      /* une section déjà dépassée, ou retrouvée par le retour arrière, est simplement là */
      html.js .apparait.deja, html.js .apparait.deja .atelier-portrait img { transition: none; }
    }
    /* D'une page à l'autre (accueil, offres, mentions), un fondu de 0,2 s sur la courbe du site */
    @media (prefers-reduced-motion: no-preference) {
      @view-transition { navigation: auto; }
      ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
    }

    @media print { html.js .apparait { opacity: 1 !important; transform: none !important; } }

    /* ---- Pied : les offres depuis partout, et un colophon ---- */
    .pied-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; width: 100%; margin: 0 0 28px; }
    .pied-nav a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
    .pied-nav a:hover { text-decoration-color: currentColor; }
    .pied-nav a:active { color: var(--fg); opacity: 0.8; }
    footer.conteneur > div .presentation { margin: 0 0 8px; }

    /* ---- Fiches : les signes montrent leurs tracés ---- */
    .fiche-corps .cadre.trace {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--surface);
      color: var(--fg);
      transition: background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .fiche-corps .cadre.trace:active { background: var(--surface-forte); }
    .trace-svg { display: block; height: auto; overflow: visible; }
    .trace-sp { width: 40%; }
    .trace-bau { width: 68%; }
    .trace-plein { fill: currentColor; transition: fill-opacity 0.5s var(--courbe); }
    .trace-contour, .trace-barres { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1); }
    .trace-barres { transition-delay: 0.08s; }
    .trace-poignees, .trace-poignees-creux, .trace-noeuds { fill: none; stroke-width: 0; vector-effect: non-scaling-stroke; transition: stroke-width 0.5s var(--courbe); }
    .trace-poignees { stroke: currentColor; stroke-linecap: round; transition-delay: 0.12s; }
    .trace-poignees-creux { stroke: var(--surface); stroke-linecap: round; transition-delay: 0.12s; }
    .trace-noeuds { stroke: currentColor; stroke-linecap: square; transition-delay: 0.18s; }
    .trace:is(:hover, .active, .montre, :focus-visible) .trace-plein { fill-opacity: 0.08; }
    .trace:is(:hover, .active, .montre, :focus-visible) .trace-contour { opacity: 1; }
    .trace:is(:hover, .active, .montre, :focus-visible) .trace-barres { opacity: 0.45; }
    .trace:is(:hover, .active, .montre, :focus-visible) .trace-poignees { stroke-width: 4px; }
    .trace:is(:hover, .active, .montre, :focus-visible) .trace-poignees-creux { stroke-width: 2px; }
    .trace:is(:hover, .active, .montre, :focus-visible) .trace-noeuds { stroke-width: 4px; }
    /* en boucle, sans survol : le passage du plein aux points prend son temps */
    .trace.en-boucle:not(:hover, .active, :focus-visible) :is(.trace-plein, .trace-contour, .trace-barres, .trace-poignees, .trace-poignees-creux, .trace-noeuds) { transition-duration: 1.4s; }
    /* Les signes des fiches se dessinent quand ils entrent à l'écran (2026-10-28), par dessinerSigne : le calque
       .dessin porte des copies (contours, points, barres, poignées, formes) ; les tracés d'origine restent pour le
       survol, tenus cachés pendant le dessin. */
    .dessin path { fill: none; stroke: currentColor; }
    .dessin .dessin-forme { fill: currentColor; fill-rule: evenodd; stroke: none; }
    .dessin .dessin-point { stroke-width: 0; stroke-linecap: square; }
    .dessin :is(.dessin-poignee, .dessin-poignee-creux) { stroke-width: 0; stroke-linecap: round; }
    .dessin .dessin-poignee-creux { stroke: var(--surface); }
    .dessin .dessin-barre { opacity: 0.45; }
    .trace.dessin-en-cours :is(.trace-contour, .trace-barres) { opacity: 0 !important; transition: none; }
    .trace.dessin-en-cours :is(.trace-poignees, .trace-poignees-creux, .trace-noeuds) { stroke-width: 0 !important; transition: none; }
    .trace-p37 { width: 62%; }
    .trace-bb { width: 30%; }
    .trace-legende {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 20px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-family: var(--texte);
      font-size: 12.5px;
      line-height: 18px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--fg58);
    }

    /* ---- Intermédiaire ---- */
    @media (max-width: 1023px) {
      h1 { font-size: 60px; }
      .ouverture { padding-top: 104px; padding-bottom: 80px; }
      .ouverture-sceau { font-size: 60px; }
      .accroche { font-size: 20px; }
      .entree { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; row-gap: 10px; }
      .entree-numero { display: none; }
      .entree-titre { grid-column: 1 / 2; }
      .entree .coin-fleche { grid-column: 2 / 3; }
      .entree-fiche { grid-column: 1 / -1; }
      .entree::after { inset: -1px -12px; }
      .offres[data-piste="cartes"] .offres-grille { grid-template-columns: minmax(0, 1fr); }
      /* empilées, les cartes prennent la hauteur de leur texte : même écart entre le numéro et le titre sur les trois */
      .offres[data-piste="cartes"] .offre { min-height: 0; }
      .offres[data-piste="cartes"] .offre-texte { margin-top: 40px; }
      .atelier-panneau { grid-template-columns: minmax(0, 1fr); padding: 32px; gap: 40px; }
      .atelier-portrait, .atelier-texte { grid-column: auto; }
      .atelier-portrait { max-width: 560px; }
      .facon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    /* La pilule posée sur la flèche garde le bout du titre à découvert */
    @media (max-width: 1023px) and (hover: hover) and (pointer: fine) {
      .entree-titre { padding-right: 128px; }
    }

    /* ---- Mobile ---- */
    @media (max-width: 759px) {
      h1 { font-size: 44px; line-height: 1.06; }
      /* le sceau au-dessus du titre, à la hauteur de deux de ses lignes */
      .ouverture { grid-template-columns: minmax(0, 1fr); padding-top: 64px; padding-bottom: 40px; }
      .ouverture-sceau { --interligne: 1.06; grid-column: 1; grid-row: 1; margin: 0 0 28px; padding-top: 0; font-size: 44px; }
      .ouverture-titre { grid-column: 1; grid-row: 2; }
      .accroche { font-size: 19px; margin-top: 24px; }
      .index-projets { --gouttiere: 20px; margin-top: 64px; }
      .entree { padding: 20px 0 24px; }
      .index-projets .entree { padding: 20px var(--gouttiere) 24px; }
      .entree-images { margin-top: 12px; }
      .entree-titre { font-size: 24px; line-height: 1.16; }
      .entree-fiche { font-size: 12px; line-height: 19px; letter-spacing: 0.06em; }
      .entree .coin-fleche { font-size: 26px; }
      .atelier { margin-top: 96px; }
      /* rayons concentriques : 16 px pour l'image + 16 px de retrait = 32 px pour le panneau */
      .atelier-panneau { padding: 16px 16px 32px; border-radius: 32px; gap: 32px; }
      .atelier-texte { padding: 0 8px; }
      .atelier-parcours { gap: 16px 20px; }
      .facon { grid-template-columns: minmax(0, 1fr); gap: 24px; }
      .trace-legende { left: 14px; right: 14px; bottom: 10px; font-size: 12px; letter-spacing: 0.06em; }
      .trace-sp { width: 46%; }
      .trace-bau { width: 80%; }
      .trace-p37 { width: 86%; }
      .trace-bb { width: 42%; }
      .pied-nav { flex-direction: column; gap: 10px; }
    }

    /* ---- Étiquettes et métadonnées en petites capitales : en retrait du texte (2026-10-27) ----
       Micrograph Regular au lieu du Medium, 12 px au lieu de 12,5, approche +0,08 em ; la couleur reste celle de chaque fond
       (secondaire sur le papier : 6,78:1 ; sur la surface légère 6,38:1 ; sur la surface survolée 5,64:1). La manchette,
       les pilules et les boutons gardent le Medium : ils agissent. */
    .etiquette, .fiche, .fiche-infos dt, .index-projets .entree-fiche dt, .trace-legende {
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0.08em;
    }
    .index-projets .entree-fiche dt { display: block; line-height: 18px; text-transform: uppercase; color: var(--fg58); }
    @media (max-width: 759px) {
      .index-projets .entree-fiche { padding: 16px 20px 18px; gap: 12px 20px; }
    }

    /* ---- La page a bougé sous un pointeur immobile (défilement, fiche ou étape qui change) ----
       html.sans-survol, posée par le script et levée au premier vrai mouvement de la souris : aucun survol ne s'allume,
       ceux qui étaient en cours se retirent d'un coup, sans traîne. Le focus clavier n'est pas touché. */
    html.sans-survol .pilule > span { transition: none; }
    html.sans-survol .entree:hover .entree-glisse, html.sans-survol .entree:hover .coin-fleche { transform: none; transition: none; }
    html.sans-survol .entree-fiche a:hover { color: inherit; text-decoration-color: var(--filet-encre); }
    html.sans-survol .carte:hover .media::after { opacity: 0; }
    html.sans-survol .offres .offre:hover:not(:focus-visible) { background-color: var(--teinte); transition: none; }
    html.sans-survol .offres .offre:hover:not(:focus-visible) .coin-fleche, html.sans-survol .offres .offre:hover:not(:focus-visible) .suite::after { transform: none; transition: none; }
    html.sans-survol .contact-carte:hover:not(:focus-visible) { background-color: var(--sombre); transition: none; }
    html.sans-survol .contact-carte:hover:not(:focus-visible) .coin-fleche { transform: none; transition: none; }
    html.sans-survol .pied-contact:hover:not(:focus-visible) { background-color: var(--sombre); transition: none; }
    html.sans-survol .pied-contact:hover:not(:focus-visible) .coin-fleche, html.sans-survol .pied-suivant:hover:not(:focus-visible) .coin-fleche { transform: none; transition: none; }
    html.sans-survol .pied-suivant:hover:not(:focus-visible) video { transform: none; }
    html.sans-survol :is(.sceau:hover, .ouverture:hover .sceau) .sceau-plein { fill-opacity: 1; }
    html.sans-survol :is(.sceau:hover, .ouverture:hover .sceau) .sceau-contour { stroke-dashoffset: 1; }
    html.sans-survol :is(.sceau:hover, .ouverture:hover .sceau) .sceau-metriques { opacity: 0; }
    html.sans-survol :is(.sceau:hover, .ouverture:hover .sceau) .sceau-noeuds path { stroke-width: 0; }
    html.sans-survol .trace:not(.active):hover .trace-plein { fill-opacity: 1; }
    html.sans-survol .trace:not(.active):hover :is(.trace-contour, .trace-barres) { opacity: 0; }
    html.sans-survol .trace:not(.active):hover :is(.trace-poignees, .trace-poignees-creux, .trace-noeuds) { stroke-width: 0; }
    html.sans-survol .bouton-pilule:not(:disabled):hover { background-color: var(--accent); }
    html.sans-survol .bouton-pilule:hover::after { transform: none; }
    html.sans-survol .options button:hover { box-shadow: none; }
    html.sans-survol .options:not(.multiple) button:hover::after { opacity: 0; transform: translateX(-8px); }
    html.sans-survol .depot-zone:hover:not(.survol) { background-color: var(--surface); }
    html.sans-survol .depot-zone:hover .coin-plus { transform: none; }
    html.sans-survol .fil button.repondu:not(:disabled):not(.courant):hover { background-color: var(--sombre); color: var(--bg); }
    html.sans-survol .retour-etape:hover { color: var(--fg58); }
    html.sans-survol .retour-etape:hover::before { transform: none; }
    html.sans-survol .refermer:hover { background: var(--sombre); }
    html.sans-survol .champs input:hover:not(:focus), html.sans-survol .champs textarea:hover:not(:focus) { background: var(--surface); box-shadow: none; }

    /* ---- Capitales Micrograph au milieu des pilules et des boutons ronds ----
       Les métriques de Micrograph (750 / −250, USE_TYPO_METRICS) posent les capitales 0,1 em au-dessus du milieu
       de la ligne, et la croix avec elles (139 à 562 pour 700) : le padding les redescend d'autant. Là où text-box
       existe, la ligne est rognée de la hauteur de capitale à la ligne de base, et le padding se répartit également.
       Même règle pour les étiquettes alignées sur la pilule dans le pied du formulaire. */
    .refermer, .depot-liste .retirer { padding: 0.2em 0 0; }
    .pied-formulaire .compteur { padding-top: 0.2em; }
    @supports (text-box: trim-both cap alphabetic) {
      .bouton-pilule, .pilule > span, .refermer, .depot-liste .retirer, .retour-etape, .pied-formulaire .compteur { text-box: trim-both cap alphabetic; }
      .bouton-pilule { padding: calc(15px + 0.15em) 24px; }
      .pilule > span { padding: calc(12px + 0.15em) 20px; }
      .refermer, .depot-liste .retirer { padding: 0; }
      .pied-formulaire .compteur { padding-top: 0; }
      .retour-etape { padding: calc(8px + 0.3em) 0; }
    }
    /* ================================================================
       Paquet 8 (2026-10-27)
       ================================================================ */

    /* ---- Le monogramme de la manchette : sur l'accueil, il est en grand dans l'ouverture ; la manchette ne le montre
       qu'une fois le sceau passé sous elle. Il glisse alors à gauche du nom (largeur, retrait, fondu, sur la courbe du site)
       et repart quand on remonte. html.logo-replie est posée en tête sur « / » seulement, puis tenue par le script :
       sans script, et sur les fiches, les offres, les mentions et la 404, le monogramme est là. ---- */
    header .nom svg { transition: width 0.7s var(--courbe), margin-right 0.7s var(--courbe), opacity 0.45s var(--courbe), transform 0.7s var(--courbe); }
    html.logo-replie header .nom svg { width: 0; margin-right: 0; opacity: 0; transform: translateX(-10px); }
    @media (prefers-reduced-motion: reduce) {
      header .nom svg { transition: none; }
    }

    /* ---- Les projets en cartes : plus de filets ni de numéros ----
       Chaque rangée : une carte à gauche (le titre, la fiche, la flèche en bas à droite où la pilule se pose), les deux
       images à droite, à la hauteur de la carte. La carte est celle des offres : surface légère au repos, rayon 30, retrait 32,
       titre au corps des formules, étiquettes en petites capitales. Toute la rangée ouvre la fiche (lien étendu) ;
       au survol, seule la carte change de fond, la flèche avance, les images s'approchent à peine. */
    .index-projets .index-liste { display: grid; gap: 24px; margin-top: 18px; padding: 0 var(--gouttiere); border: 0; }
    .index-projets .entree {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: none;
      align-items: stretch;
      row-gap: 0;
      padding: 0;
      border: 0;
    }
    .index-projets .entree::after { inset: 0; }
    .entree-carte {
      grid-column: 1 / 6;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      padding: 28px 32px 32px;
      border-radius: 30px;
      background-color: var(--surface-legere, var(--surface));
      transition: background-color 0.4s var(--courbe);
    }
    .index-projets .entree-titre { padding-right: 0; font-size: clamp(26px, 2.1vw, 30px); line-height: 1.12; }
    .index-projets .entree-fiche {
      align-self: stretch;
      margin: auto 0 0;
      padding: 32px 0 0;
      border-radius: 0;
      background: none;
    }
    .index-projets .entree-fiche > .large { padding-right: 56px; }
    .index-projets .entree:is(:hover, :has(.entree-lien:focus-visible)) .entree-fiche,
    html.sans-survol .index-projets .entree:hover:not(:has(:focus-visible)) .entree-fiche { background: none; }
    .entree-images { grid-column: 6 / 13; grid-row: 1; align-self: stretch; }
    .index-projets .tuile-media { width: 100%; height: 100%; }
    /* les images reprennent le coin et l'écart de la carte */
    .entree-images { gap: 24px; }
    .index-projets .tuile-media { border-radius: 30px; }
    .index-projets .entree .coin-fleche {
      grid-column: 5 / 6;
      grid-row: 1;
      justify-self: end;
      align-self: end;
      margin: 0 34px 30px 0;
      font-size: 28px;
      line-height: 1;
    }
    .index-projets .entree:is(:hover, :has(.entree-lien:focus-visible)) .entree-carte { background-color: var(--surface-moyenne, var(--surface-forte)); }
    .index-projets .entree:active .entree-carte { background-color: var(--surface-forte); }
    .index-projets .entree:is(:hover, :has(.entree-lien:focus-visible)) .entree-glisse { transform: none; }
    .index-projets .entree:is(:hover, :has(.entree-lien:focus-visible)) .coin-fleche { transform: translateX(10px); }
    html.sans-survol .index-projets .entree:hover:not(:has(:focus-visible)) .entree-carte { background-color: var(--surface-legere, var(--surface)); transition: none; }
    html.sans-survol .index-projets .entree:hover:not(:has(:focus-visible)) .coin-fleche { transform: none; transition: none; }
    /* la pilule posée sur la flèche garde la fin des livrables à découvert */
    @media (hover: hover) and (pointer: fine) and (min-width: 760px) {
      .index-projets .entree-fiche > .large { padding-right: 112px; }
    }
    /* sous 1 024 px : la carte, puis ses deux images ; la flèche reste en bas à droite de la carte */
    @media (max-width: 1023px) {
      .index-projets .entree { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 0; }
      .index-projets .entree::after { inset: 0; }
      .entree-carte { grid-column: 1; grid-row: 1; }
      .entree-images { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; }
      .index-projets .tuile-media { height: auto; }
      .entree-images { gap: 12px; }
      .index-projets .tuile.grande .tuile-media { height: 100%; }
      .index-projets .entree .coin-fleche { grid-column: 1; grid-row: 1; margin: 0 30px 28px 0; }
      .index-projets .entree-titre { padding-right: 0; }
    }
    /* « Pas encore sûr… » a la structure de sa voisine : étiquette, titre, phrase, prix en bas, à la hauteur du sien */
    @media (min-width: 1024px) {
      .offres-suite .entree-phrase { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
      .offres-suite .entree-phrase .prix { margin-top: auto; padding-top: 2px; }
    }
    @media (max-width: 759px) {
      .index-projets .index-liste { gap: 32px; }
      .entree-carte { padding: 22px 24px 26px; }
      .index-projets .entree-titre { font-size: 24px; line-height: 1.16; }
      .index-projets .entree-fiche { padding: 24px 0 0; gap: 12px 20px; }
      .index-projets .entree-fiche > .large { padding-right: 40px; }
      .index-projets .entree .coin-fleche { margin: 0 22px 24px 0; font-size: 26px; }
    }

    /* ---- Paquet 9 (2026-10-27) : titres de section, cartes calées en bas, esquisse et suivi en couleur ----
       « Les projets », « Travaillons ensemble » et « L'atelier » au même corps (.titre-section, celui de .offres-titre), le contenu
       32 px dessous. L'atelier : le grand titre, la carte (portrait, texte, parcours), « Comment je travaille » dans la même carte
       (paquet 10). Sous les offres, l'esquisse d'abord (le bordeaux de la typographie à 20 %
       sur le papier), puis le suivi (l'ocre) ; le titre et la phrase calés en bas de la carte. Contrastes (WCAG 2.x) :
       esquisse #dbc7bc encre 9,96 · secondaire #4a3f36 6,28 (survol #d0b7ad 8,53 · 5,38) ; suivi #e8c46c encre 9,68 · 6,10 (survol 8,66 · 5,46). */
    .index-projets .index-liste { margin-top: 32px; }
    .atelier-texte .atelier-titre {
      margin: 0;
      font-family: var(--titre);
      font-weight: 400;
      font-size: clamp(28px, 2.6vw, 40px);
      line-height: 1.1;
      letter-spacing: -0.012em;
      color: var(--fg);
      text-wrap: balance;
    }
    .offres-suite > .entree-esquisse { --carte: var(--bordeaux-clair); --carte-forte: var(--bordeaux-clair-fort); --carte-sur: var(--sur-clair); }
    .offres-suite > .entree-suivi { --carte: var(--ocre); --carte-forte: var(--ocre-fort); --carte-sur: var(--sur-ocre); }
    .offres-suite > .entree.entree-offre {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(40px, 1fr) auto auto;
      background-color: var(--carte);
    }
    .offres-suite > .entree:is(:hover, :has(:is(.entree-lien, .entree-bouton):focus-visible)) { background-color: var(--carte-forte); }
    .offres-suite > .entree.entree-offre:active { background-color: var(--carte-forte); }
    html.sans-survol .offres-suite > .entree:hover:not(:has(:focus-visible)) { background-color: var(--carte); }
    .offres-suite .entree-etiquette, .offres-suite .entree-phrase { color: var(--carte-sur); }
    .entree-offre .entree-titre { grid-row: 3; }
    .entree-offre .entree-phrase { grid-row: 4; }
    .offres-suite ::selection { background: var(--fg); color: var(--bg); }
    @media (min-width: 1024px) {
      .offres-suite { grid-template-rows: auto minmax(56px, 1fr) auto auto; }
      .offres-suite > .entree.entree-offre { grid-row: span 4; grid-template-rows: subgrid; }
    }
    @media (max-width: 759px) {
      .index-projets .index-liste { margin-top: 24px; }
    }
    /* ---- Paquet 11 (2026-10-27) : l'atelier en une seule carte ----
       Le grand titre « L'atelier » au-dessus de la carte est retiré : il devient l'étiquette de la carte (le h2 de la
       section, #titre-atelier), au-dessus du titre validé. Dès 1 024 px, à droite du portrait et calés en haut de la carte :
       l'étiquette, le titre, puis le texte et le parcours (une colonne, un filet à gauche) côte à côte, puis « Comment je
       travaille » en deux colonnes. Le portrait prend la hauteur de cette colonne (object-fit cover, la légende dessous) :
       ni blanc sous la photo, ni blanc sous le texte. Sous 1 024 px, tout s'empile : portrait, étiquette, titre, texte,
       parcours, façon en deux colonnes, puis une au téléphone. */
    .atelier-etiquette { margin: 0; font-weight: 400; }
    .atelier-texte .atelier-titre { margin-top: 14px; }
    .atelier-rangee {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 15em);
      column-gap: 32px;
      align-items: start;
      margin-top: 28px;
    }
    .atelier-recit > .preuve { margin-top: 0; }
    .atelier-recit > p:not(.preuve) { margin-top: 16px; }
    .atelier-rangee > .atelier-parcours {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      margin: 0;
      padding: 0 0 0 24px;
      border-top: 0;
      border-left: 1px solid var(--line);
    }
    .atelier-texte > .atelier-facon { margin-top: 40px; }
    .atelier-facon .facon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 16px; }
    /* Paquet 11 (2026-10-27) : au focus clavier, les cartes des métiers, la carte contact et le pied des fiches réagissent
       comme au survol, à l'égal de l'esquisse, du suivi et des formules : le fond passe au fort, la flèche avance de 10 px
       (même courbe, même durée). Les règles html.sans-survol de ces cartes épargnent désormais la carte qui a le focus. */
    .offres[data-piste="cartes"] .offre:focus-visible { background: var(--teinte-forte); }
    .offres .offre:focus-visible .coin-fleche { transform: translateX(10px); }
    .offre:focus-visible .suite::after { transform: translateX(6px); }
    :is(.contact-carte, .pied-contact):focus-visible { background: var(--sombre-fort); }
    :is(.contact-carte, .pied-contact, .pied-suivant):focus-visible .coin-fleche { transform: translateX(10px); }
    .pied-suivant:focus-visible video { transform: scale(1.03); }
    /* Cartes de prix captées (esquisse, suivi, formules) : la pilule remplace la flèche, comme sur les cartes des métiers */
    @media (min-width: 760px) {
      html.curseur-capte :is(.offres-suite > .entree, .formules > .formule).capte .coin-fleche { opacity: 0; }
    }
    @media (min-width: 1024px) {
      .atelier-portrait { align-self: stretch; display: flex; flex-direction: column; }
      .atelier-portrait .cadre { position: relative; flex: 1 1 auto; min-height: 460px; aspect-ratio: auto; }
      .atelier-portrait .cadre picture { position: absolute; inset: 0; }
      /* recadré plus étroit qu'au 4/5 : le cadrage glisse un peu à gauche, pour que la fenêtre du bord droit ne reste pas en liseré */
      .atelier-portrait img { object-position: 40% 44%; }
    }
    /* Paquet 11, reprise : de 1 024 à 1 279 px, le texte et le parcours côte à côte écrasaient le récit (141 px à 1 024) et
       étiraient le portrait en bande. Le parcours repasse sous le récit, en deux colonnes avec un filet haut, et « Comment
       je travaille » passe sous la photo et le texte, sur toute la largeur de la carte en quatre colonnes (.atelier-texte
       s'efface de la grille pour que ses blocs s'y placent). Le portrait suit la hauteur du texte, sans dépasser
       1,6 fois sa largeur. De 1 280 à 1 439 px, le parcours se resserre à 13 em pour laisser au récit sa mesure. */
    @media (min-width: 1024px) and (max-width: 1279px) {
      .atelier-panneau { row-gap: 0; }
      .atelier-texte { display: contents; }
      .atelier-texte > * { grid-column: 7 / 13; }
      .atelier-portrait { grid-row: 1 / span 3; container-type: inline-size; }
      .atelier-portrait .cadre { min-height: 0; max-height: 160cqi; }
      .atelier-rangee { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
      .atelier-rangee > .atelier-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
      .atelier-texte > .atelier-facon { grid-column: 1 / -1; margin-top: 48px; }
      .atelier-facon .facon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      /* plus étroit qu'à 1 280 px : le cadrage glisse encore un peu à gauche, la fenêtre du bord droit reste hors champ */
      .atelier-portrait img { object-position: 34% 44%; }
    }
    @media (min-width: 1280px) and (max-width: 1439px) {
      .atelier-rangee { grid-template-columns: minmax(0, 1fr) minmax(0, 13em); column-gap: 28px; }
    }
    @media (max-width: 1023px) {
      .atelier-rangee { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-top: 24px; }
      .atelier-rangee > .atelier-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
      .atelier-texte > .atelier-facon { margin-top: 36px; }
    }
    @media (max-width: 759px) {
      .atelier-rangee > .atelier-parcours { gap: 16px 20px; }
      .atelier-facon .facon { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    }
    /* Projet suivant : le média sur toute la carte, la légende sur un voile d'encre à 72 % (et non plus sur l'aplat), qui
       monte en fondu sur 120 px. Même sur du blanc pur, l'écru y garde 5,58:1 : l'AA ne dépend toujours pas du média.
       Le fondu et le voile sont un seul fond (pas de raccord). */
    .pied-suivant video { position: absolute; inset: 0; width: 100%; height: 100%; flex: none; }
    .pied-suivant .legende-suivant { margin-top: auto; background: none; }
    @media (max-width: 759px) and (max-height: 739px) {
      .pied-suivant .legende-suivant { background: var(--sombre); }
    }

    /* Sur téléphone, les images qui ont leur déclinaison verticale (suffixe -portrait) passent en 4:5 (2026-11-06) */
    @media (max-width: 759px) {
      .fiche-corps .cadre.portrait,
      .preuve-projet .cadre.portrait { aspect-ratio: 4 / 5; }
    }