/* ==========================================================================
   Soul and Park — feuille de style principale
   Charte logo v1.0 · trois couleurs, trois polices, une seule trame.
   Ordre du fichier : socle · trame · typographie · en-tête · sections · pied
                      · déclinaison tablette · déclinaison mobile · accessibilité
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Socle
   -------------------------------------------------------------------------- */

:root {
  /* Couleurs de la charte. Rien d'autre ne doit apparaître dans ce fichier. */
  --bleu:          #1428FF;
  --encre:         #08090D;
  --ivoire:        #F2EFE9;
  --ivoire-clair:  #F7F4EF;
  /* Deux gris de service, tirés de l'encre et de l'ivoire. */
  --encre-douce:   #55524C;
  --ivoire-douce:  #B7B3AB;

  /* Trame. Une gouttière unique, partagée par l'en-tête, les sections
     et le pied de page : c'est elle qui tient l'alignement du site. */
  --cadre:      1560px;
  --gouttiere:  clamp(20px, 3.4vw, 68px);
  --filet:      rgba(8, 9, 13, .14);
  --filet-clair: rgba(242, 239, 233, .18);

  /* Rythme vertical. Une seule échelle, six crans. */
  --pas-1: 8px;
  --pas-2: 16px;
  --pas-3: 26px;
  --pas-4: 42px;
  --pas-5: 68px;
  --respiration: clamp(78px, 8.4vw, 138px);

  /* Familles. Archivo porte les titres et l'axe de chasse,
     Instrument Sans le texte courant, IBM Plex Mono les mentions techniques. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte:   "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle typographique. Cinq crans de titre, deux de texte.
     Aucune taille ne doit être écrite en dur ailleurs dans le fichier. */
  --t-titre:     clamp(52px, 7.2vw, 122px);
  --t-section:   clamp(42px, 5.2vw, 86px);
  --t-carte:     clamp(32px, 3.6vw, 60px);
  --t-chapeau:   clamp(19px, 1.4vw, 26px);
  --t-courant:   17px;
  --t-mention:   15px;
  --t-etiquette: 11px;

  /* Courbes. Une seule sortie pour tout le site. */
  --sortie: cubic-bezier(.22, .68, .2, 1);

  /* Position du viseur dans l'en-tête, pilotée par le script. */
  --viseur-x: 60%;
  --viseur-y: 44%;
  --viseur-r: 190px;
}

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

html {
  background: var(--ivoire);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* `clip` et non `hidden` : le débordement latéral est coupé sans créer
     de conteneur de défilement, ce qui casserait toutes les sections collées. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-courant);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a   { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
p   { margin: 0; }

/* --------------------------------------------------------------------------
   2. Trame partagée
   -------------------------------------------------------------------------- */

/* Tout ce qui doit s'aligner sur la colonne du site passe par .cadre. */
.cadre {
  width: 100%;
  max-width: var(--cadre);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section        { padding-block: var(--respiration); }
.section--encre { background: var(--encre);  color: var(--ivoire); }
.section--bleu  { background: var(--bleu);   color: #fff; }
.section--papier{ background: var(--ivoire-clair); }

/* Filet d'ouverture de section : c'est le repère qui donne l'assise éditoriale. */
.rubrique {
  padding-top: var(--pas-2);
  border-top: 1px solid var(--filet);
  margin-bottom: var(--pas-4);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bleu);
}
.section--encre .rubrique,
.section--bleu  .rubrique { border-top-color: var(--filet-clair); }
.section--encre .rubrique { color: #9AA2FF; }
.section--bleu  .rubrique { color: rgba(255, 255, 255, .78); }

/* En-tête de section : titre à gauche, phrase d'appui à droite. */
.entete {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(280px, .6fr);
  gap: clamp(30px, 4vw, 76px);
  align-items: end;
  margin-bottom: var(--pas-5);
}
.entete h2 {
  font-size: var(--t-section);
  line-height: .92;
  letter-spacing: -.055em;
}
.entete p {
  max-width: 36ch;
  color: var(--encre-douce);
  line-height: 1.5;
}
.section--encre .entete p { color: var(--ivoire-douce); }

/* Lien de texte souligné d'un filet bleu. */
.lien-texte {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--pas-3);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bleu);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.lien-texte span { color: var(--bleu); font-size: 16px; }

/* Cadrage bleu au survol et au passage à l'écran. Signature discrète,
   reprise du viseur : le cadre se referme sur l'image. */
.cadrage { position: relative; isolation: isolate; }
.cadrage::before,
.cadrage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.cadrage::before {
  z-index: 9;
  inset: 0 auto auto 0;
  height: 2px; width: 0;
  background: var(--bleu);
  transition: width .5s var(--sortie);
}
.cadrage::after {
  z-index: 8;
  inset: 0;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .3s;
}
.cadrage:hover::before,
.cadrage.est-vue::before { width: 100%; }
.cadrage:hover::after,
.cadrage.est-vue::after  { box-shadow: inset 0 0 0 1px var(--bleu); }

/* --------------------------------------------------------------------------
   3. Mise au point typographique
   Les titres arrivent resserrés puis s'ouvrent à leur chasse normale.
   C'est la traduction typographique du viseur de l'en-tête : le seul
   effet de texte du site, et il ne sert qu'aux titres de section.
   -------------------------------------------------------------------------- */

.mise-au-point {
  font-stretch: 84%;
  transition: font-stretch 1.15s var(--sortie);
}
.mise-au-point.est-nette { font-stretch: 100%; }

/* --------------------------------------------------------------------------
   4. En-tête et navigation
   -------------------------------------------------------------------------- */

.barre {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  color: #fff;
  background: linear-gradient(180deg, rgba(8, 9, 13, .38), transparent);
  transition: background .25s, border-color .25s;
  pointer-events: none;
}
.barre.est-defilee {
  background: rgba(8, 9, 13, .88);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  backdrop-filter: blur(14px);
}
.barre .cadre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.barre a,
.barre button { pointer-events: auto; }

.marque {
  display: block;
  width: 104px;
  opacity: 0;
  transition: opacity .3s;
}
.barre.est-defilee .marque,
.barre.menu-ouvert .marque { opacity: 1; }
.marque img { height: auto; object-fit: contain; }

.menu {
  display: flex;
  gap: var(--pas-3);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.menu a { opacity: .88; transition: opacity .18s, color .18s; }
.menu a:hover { opacity: 1; color: #AAB1FF; }

.bouton-menu { display: none; }

/* --------------------------------------------------------------------------
   5. En-tête immersif — le viseur
   Deux calques identiques : l'un flou, l'autre net, révélé par un masque
   circulaire qui suit le pointeur. C'est la mise au point du site.
   -------------------------------------------------------------------------- */

.viseur-scene {
  position: relative;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
  background: #D9D6D0;
  cursor: none;
  touch-action: pan-y;
}
.plan { position: absolute; inset: 0; }
.plan--flou {
  filter: blur(18px) saturate(.7);
  opacity: .84;
  transform: scale(1.03);
}
.plan--net {
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle var(--viseur-r) at var(--viseur-x) var(--viseur-y), #000 0 58%, transparent 78%);
          mask-image: radial-gradient(circle var(--viseur-r) at var(--viseur-x) var(--viseur-y), #000 0 58%, transparent 78%);
}

.vue     { position: absolute; margin: 0; overflow: hidden; }
.vue img { transition: transform 1.2s var(--sortie); }
.vue--leo { inset: 0 auto 0 0; width: 47%; background: #ECE8E3; }
.vue--leo img { object-position: 50% 36%; }
.vue--alb { inset: 0 0 auto auto; width: 53%; height: 52%; background: #BF5D44; }
.vue--alb img { object-position: 56% 50%; }
.vue--gm  { inset: auto 0 0 auto; width: 53%; height: 48%; background: #A8A6A5; }
.vue--gm img { object-position: 54% 36%; filter: grayscale(1); }

/* Grain argentique : régime cinématographique de l'en-tête. */
.grain {
  position: absolute;
  z-index: 4;
  inset: -50%;
  opacity: .14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
.viseur-scene::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 13, .08), rgba(8, 9, 13, .36));
  pointer-events: none;
}

/* Réticule : cercle, quatre traits de repère, point central. */
.reticule {
  position: absolute;
  z-index: 10;
  left: var(--viseur-x);
  top: var(--viseur-y);
  width: 232px;
  height: 232px;
  border: 1px solid rgba(20, 40, 255, .96);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.reticule::before,
.reticule::after,
.reticule span::before,
.reticule span::after { content: ""; position: absolute; background: var(--bleu); }
.reticule::before { top: 50%; left: -17px;  width: 33px; height: 1px; }
.reticule::after  { top: 50%; right: -17px; width: 33px; height: 1px; }
.reticule span::before { left: 50%; top: -17px;    width: 1px; height: 33px; }
.reticule span::after  { left: 50%; bottom: -17px; width: 1px; height: 33px; }
.reticule i {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bleu);
  transform: translate(-50%, -50%);
}

.viseur-texte {
  position: absolute;
  z-index: 11;
  inset: auto 0 0;
  padding-bottom: var(--pas-4);
  color: #fff;
}
.surtitre {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.viseur-logo { width: min(272px, 28vw); height: auto; object-fit: contain; }

.viseur-pied {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--pas-3);
  margin-top: var(--pas-4);
  padding-top: var(--pas-2);
  border-top: 1px solid rgba(255, 255, 255, .7);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  pointer-events: auto;
}
.viseur-pied::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 92px; height: 1px;
  background: var(--bleu);
}
.viseur-pied .avis {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  opacity: .92;
  transition: opacity .2s;
}
.viseur-pied .avis:hover { opacity: 1; }
.etoiles { font-size: 9px; letter-spacing: .1em; }
.viseur-pied .entrer { justify-self: end; }
.viseur-pied .entrer span { margin-left: 7px; color: #8F99FF; font-size: 17px; }

/* --------------------------------------------------------------------------
   6. Le regard
   Trame asymétrique : le titre occupe sept colonnes, le texte quatre,
   une colonne vide les sépare. Les deux blocs partagent leur ligne de pied.
   -------------------------------------------------------------------------- */

.regard { border-bottom: 1px solid var(--filet); }
.regard-trame {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr);
  align-items: end;
}
.regard-titre {
  grid-column: 1;
  font-size: var(--t-titre);
  line-height: .88;
  letter-spacing: -.062em;
}
.regard-titre .ligne { display: block; }
.regard-texte { grid-column: 3; }
.regard-chapeau {
  margin-bottom: var(--pas-3);
  font-size: var(--t-chapeau);
  line-height: 1.24;
}
.regard-texte p + p { margin-top: var(--pas-2); }
.regard-texte p:not(.regard-chapeau) {
  color: var(--encre-douce);
  line-height: 1.56;
}

/* --------------------------------------------------------------------------
   7. Focus projets
   -------------------------------------------------------------------------- */

.grille-focus {
  --h-rang-1: clamp(380px, 33vw, 470px);
  --h-rang-2: clamp(420px, 40vw, 580px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--pas-2);
}
.carte-focus {
  position: relative;
  overflow: hidden;
  background: #2A2C31;
}
.carte-focus--large  { grid-column: span 7; height: var(--h-rang-1); }
.carte-focus--haute  { grid-column: span 5; height: var(--h-rang-1); }
.carte-focus--presse { grid-column: span 5; height: var(--h-rang-2); background: #07141A; }
.carte-focus--belles { grid-column: span 7; height: var(--h-rang-2); }

.carte-focus > img { transition: transform .75s var(--sortie); }
.carte-focus:hover > img { transform: scale(1.02); }
.carte-focus--large > img  { object-position: 50% 30%; }
.carte-focus--haute > img  { object-position: 50% 52%; }
.carte-focus--presse > img { object-position: 50% 47%; filter: brightness(.82) saturate(.97); }

.voile {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .44) 0%,
    rgba(0, 0, 0, .04) 20%,
    rgba(0, 0, 0, .04) 42%,
    rgba(0, 0, 0, .84) 100%);
}

.meta {
  position: absolute;
  z-index: 5;
  inset: 20px 22px auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.meta span:last-child { max-width: 58%; text-align: right; }

.legende {
  position: absolute;
  z-index: 5;
  inset: auto 22px 52px;
  color: #fff;
}
.legende h3 {
  margin-bottom: 11px;
  font-size: var(--t-carte);
  line-height: .92;
  letter-spacing: -.05em;
}
.legende p {
  max-width: 46ch;
  font-size: var(--t-mention);
  line-height: 1.42;
  color: rgba(255, 255, 255, .93);
}
.decouvrir {
  position: absolute;
  z-index: 5;
  right: 22px;
  bottom: 20px;
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. L'atelier en action
   Séquence collée : quatre volets qui se relaient au défilement.
   -------------------------------------------------------------------------- */

.action { height: 215svh; position: relative; }
.action-collee {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  padding-block: clamp(96px, 10vh, 128px) var(--pas-4);
  overflow: hidden;
}
.action-collee .entete { margin-bottom: 0; align-items: start; }
.action-collee .entete h2 { max-width: 17ch; }

.action-scene {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: clamp(38px, 6vw, 104px);
}
.action-numero {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(84px, 11vw, 178px);
  line-height: .8;
  letter-spacing: -.07em;
  color: var(--bleu);
}
.action-volets {
  display: grid;
  align-items: center;
  min-height: 230px;
}
.volet {
  grid-area: 1 / 1;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(22px);
  pointer-events: none;
  transition: opacity .28s, transform .42s var(--sortie), filter .35s;
}
.volet.est-actif {
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: auto;
}
.volet h3 {
  font-size: clamp(38px, 5.2vw, 78px);
  line-height: .92;
  letter-spacing: -.055em;
}
.volet p {
  max-width: 62ch;
  margin-top: 20px;
  font-size: var(--t-chapeau);
  line-height: 1.46;
  color: var(--encre-douce);
}

.action-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #B8B5AE;
}
.action-rail button {
  position: relative;
  padding: 15px 12px 0 0;
  border: 0;
  background: none;
  color: #77736E;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.action-rail button::before {
  content: "";
  position: absolute;
  left: 0; top: -2px;
  width: 0; height: 3px;
  background: var(--bleu);
  transition: width .28s;
}
.action-rail button.est-actif { color: var(--encre); }
.action-rail button.est-actif::before { width: 100%; }
.action-rail button span { margin-right: 6px; color: var(--bleu); }

/* --------------------------------------------------------------------------
   9. Réalisations
   Deux traitements distincts, parce que le contenu n'est pas de même nature.
   Les photographies forment une planche que l'on fait glisser librement.
   Les identités forment un répertoire : tout est visible d'un coup, entier.
   -------------------------------------------------------------------------- */

.planche {
  --h-planche: 330px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px var(--pas-2);
  padding: var(--pas-3) 0 var(--pas-4);
  border-top: 1px solid var(--filet);
}
.planche--imagerie { --h-planche: clamp(340px, 46svh, 460px); }

.planche-titre {
  grid-row: 1 / span 2;
  padding-top: 4px;
  color: var(--bleu);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* On saisit la planche et on la déplace. Le défilement de la page reste libre. */
.hublot {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.hublot::-webkit-scrollbar { display: none; }
.hublot.est-saisie { cursor: grabbing; scroll-snap-type: none; }
.hublot:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; }
.hublot.est-saisie * { pointer-events: none; }

.piste {
  display: flex;
  gap: var(--pas-2);
  width: max-content;
  height: var(--h-planche);
}
.piste > * { scroll-snap-align: start; }

/* Jauge de parcours : un filet qui se remplit à mesure que la planche avance.
   Elle remplace la barre de défilement et indique ce qu'il reste à voir. */
.jauge {
  grid-column: 2;
  position: relative;
  height: 20px;
  padding-top: 9px;
  cursor: pointer;
  touch-action: none;
}
.jauge::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--filet);
}
.jauge span {
  position: absolute;
  left: var(--depart, 0%);
  top: 9px;
  width: var(--part, 20%);
  height: 2px;
  background: var(--bleu);
  transition: left .1s linear;
}
.jauge:hover span, .jauge.est-saisie span { height: 4px; top: 8px; }
.planche:not(.est-glissable) .jauge { visibility: hidden; }

.plaque { position: relative; flex: 0 0 auto; height: 100%; overflow: hidden; }
.plaque img { transition: transform .65s var(--sortie); }
.plaque:hover img { transform: scale(1.02); }

/* Les rapports se calculent sur la hauteur commune de la planche. */
.r-4-3 { width: calc(var(--h-planche) * 1.333); }
.r-3-2 { width: calc(var(--h-planche) * 1.5); }
.r-5-4 { width: calc(var(--h-planche) * 1.25); }
.r-2-3 { width: calc(var(--h-planche) * .667); }
.r-16-9 { width: calc(var(--h-planche) * 1.778); }
.r-1-1 { width: var(--h-planche); }

/* Emplacement réservé : visuel non encore livré, traité comme un carton
   de tournage plutôt que comme une image manquante. */
.a-venir {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background-color: var(--encre);
  background-image:
    linear-gradient(135deg, rgba(20, 40, 255, .34), transparent 46%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 11px);
  color: var(--ivoire);
}
.a-venir span {
  position: absolute;
  top: 22px; left: 22px;
  color: #9BA4FF;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
}
/* Clips. La vignette est un lien : elle ouvre la vidéo dans un nouvel onglet.
   Le titre reste sur un voile plutôt que sur l'image nue, pour rester lisible
   quelle que soit la pochette. */
.clip {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  background: var(--encre);
}
.clip img { transition: transform .65s var(--sortie); }
.clip:hover img { transform: scale(1.02); }
.voile--clip {
  background: linear-gradient(180deg, transparent 46%, rgba(8, 9, 13, .88) 100%);
}
.clip-legende {
  position: absolute;
  z-index: 3;
  inset: auto 18px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  color: #fff;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(8, 9, 13, .55);
}
.clip-legende b { font-weight: 500; }
.clip-legende span { color: #AEB5FF; }
.clip-legende i { font-style: normal; }
.clip:hover .clip-legende span { color: #fff; }

/* Pochettes. Carrées, légendées sous l'image, jamais dessus. */
.planche--artwork { --h-planche: clamp(300px, 34vw, 420px); }
.pochette {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--h-planche) - 46px);
  height: 100%;
  margin: 0;
}
.pochette img {
  height: calc(100% - 46px);
  transition: transform .6s var(--sortie);
}
.pochette:hover img { transform: scale(1.02); }
.pochette figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  height: 46px;
  padding-top: 12px;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #78746E;
}
.pochette figcaption b { font-weight: 500; color: var(--encre); }

.a-venir h3 { margin-bottom: 4px; font-size: 28px; letter-spacing: -.04em; }
.a-venir p  { color: var(--ivoire-douce); font-size: var(--t-mention); }
.large { width: min(48vw, 640px); }
.moyen { width: min(34vw, 450px); }
.carre { width: var(--h-planche); }

/* Répertoire d'identités. Cellule blanche, logo contenu avec sa marge de
   respect : jamais rogné, jamais recouvert, et aucun titre sous l'image. */
.planche--repertoire { --h-planche: auto; }
.repertoire {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pas-2);
}
/* Cellule de taille fixe : le format du logo n'influe jamais sur le cadre.
   C'est le cadre qui impose son rapport, et le logo se loge dedans. */
.marque-client {
  display: block;
  margin: 0;
  padding: clamp(22px, 2.4vw, 40px);
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--filet);
}
.marque-client img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s var(--sortie);
}
.marque-client:hover img { transform: scale(1.03); }

/* Aperçus de sites.
   Une fenêtre de navigateur sobre, aux couleurs de l'atelier. L'image fixe et
   la vidéo occupent exactement le même cadre, au même ratio : le passage de
   l'une à l'autre ne déplace rien. */
.planche--sites { --h-planche: auto; }
.apercus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pas-2);
}
.apercu { margin: 0; }
.apercu:focus { outline: none; }

.apercu-fenetre {
  border: 1px solid var(--filet);
  background: #fff;
  transition: border-color .3s, box-shadow .3s, transform .5s var(--sortie);
}
.apercu:hover .apercu-fenetre,
.apercu:focus-visible .apercu-fenetre {
  border-color: var(--bleu);
  box-shadow: 0 14px 34px rgba(8, 9, 13, .1);
  transform: translateY(-3px);
}

.apercu-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-bottom: 1px solid var(--filet);
  background: #EDEAE4;
}
.apercu-chrome span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C6C2BA;
}
.apercu:hover .apercu-chrome span:first-child,
.apercu:focus-visible .apercu-chrome span:first-child { background: var(--bleu); }

.apercu-ecran {
  position: relative;
  aspect-ratio: 1280 / 742;
  overflow: hidden;
  background: #E6E2DC;
}
.apercu-fixe,
.apercu-anime {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apercu-anime {
  opacity: 0;
  transition: opacity .2s linear;
}
/* La vidéo n'apparaît qu'une fois réellement prête : jamais d'écran noir. */
.apercu.est-lue .apercu-anime { opacity: 1; }

/* Bouton de lecture volontaire : visible uniquement là où le survol n'existe
   pas, ou quand le visiteur a demandé un mouvement réduit. */
.apercu-bouton {
  position: absolute;
  z-index: 3;
  right: 12px; bottom: 12px;
  display: none;
  padding: 8px 13px;
  border: 0;
  background: rgba(8, 9, 13, .82);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.apercu.est-lue .apercu-bouton { opacity: .55; }

.apercu figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 13px;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #78746E;
}
.apercu figcaption b { font-weight: 500; color: var(--encre); }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .apercu-bouton { display: block; }
}

@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .apercus {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--pas-5);
  }
  .apercu { width: min(258px, 68vw); }
  /* Seule entorse au zéro rayon de la charte : sans coins arrondis, le cadre
     ne se lit pas comme un téléphone. */
  .apercu-fenetre {
    padding: 7px;
    border-color: var(--encre);
    border-radius: 20px;
    background: var(--encre);
  }
  .apercu:hover .apercu-fenetre,
  .apercu:focus-visible .apercu-fenetre { transform: none; }
  .apercu-chrome {
    justify-content: center;
    height: 15px;
    padding: 0;
    border: 0;
    background: none;
  }
  .apercu-chrome span:first-child {
    width: 42px; height: 4px;
    border-radius: 2px;
    background: #3C3F47;
  }
  .apercu-chrome span + span { display: none; }
  .apercu-ecran { aspect-ratio: 1080 / 1920; border-radius: 13px; }
  .apercu figcaption { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   10. Autres accompagnements
   -------------------------------------------------------------------------- */

.grille-autres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pas-2); }
.carte-autre {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: var(--encre);
}
.carte-autre img { transition: transform .7s var(--sortie); }
.carte-autre:hover img { transform: scale(1.02); }
/* Le voile est un élément réel, jamais un pseudo-élément : .cadrage occupe
   déjà ::before et ::after, et une seconde règle ::after aurait fusionné
   avec la première, récupéré son z-index et recouvert le texte. */
.voile--doux {
  background: linear-gradient(180deg,
    transparent 26%,
    rgba(8, 9, 13, .36) 58%,
    rgba(8, 9, 13, .90) 100%);
}
.carte-autre > div:not(.voile) { position: absolute; z-index: 3; inset: auto 24px 44px; }

/* Blanc franc, sans halo : ombre courte, uniquement pour détacher le bord. */
.carte-autre span,
.carte-autre h3,
.carte-autre p { color: #FFFFFF; text-shadow: 0 1px 3px rgba(8, 9, 13, .55); }
.carte-autre span {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.carte-autre h3 {
  margin: 7px 0 10px;
  font-size: var(--t-carte);
  line-height: .92;
  letter-spacing: -.05em;
}
.carte-autre p {
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   11. L'atelier
   Le pictogramme se resserre et s'éclaircit à mesure que le texte arrive.
   -------------------------------------------------------------------------- */

.atelier { height: 190svh; position: relative; --avancee: 0; }
.atelier-collee {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100svh;
  overflow: hidden;
}
.atelier-picto {
  position: absolute;
  z-index: 0;
  left: 55%; top: 49%;
  width: min(42vw, 540px);
  height: auto;
  object-fit: contain;
  opacity: calc(.32 - var(--avancee) * .19);
  filter: blur(calc((1 - var(--avancee)) * 5px));
  transform: translate(-50%, -50%) scale(calc(1.08 - var(--avancee) * .1));
  pointer-events: none;
}
.atelier-trame {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 53ch) minmax(0, 224px);
  justify-content: space-between;
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
  width: 100%;
}
.atelier-texte h2 {
  max-width: 10ch;
  font-size: var(--t-section);
  line-height: .92;
  letter-spacing: -.055em;
}
.atelier-corps {
  max-width: 53ch;
  margin-top: var(--pas-4);
}
.atelier-corps p { color: var(--encre-douce); line-height: 1.58; }
.atelier-corps p + p { margin-top: var(--pas-2); }
.atelier-corps strong { color: var(--encre); }

/* Les trois blocs arrivent l'un après l'autre : titre, texte, portrait. */
.arrivee {
  opacity: var(--o, 0);
  filter: blur(calc((1 - var(--o)) * 14px));
  transform: translateY(calc((1 - var(--o)) * 22px));
}
.atelier-portrait {
  width: min(100%, 224px);
  margin-left: auto;
  align-self: end;
}
.atelier-portrait img { height: 316px; object-position: center top; }
.atelier-portrait figcaption {
  margin-top: 9px;
  color: #75716B;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */

.contact-trame {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .56fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
}
.contact-trame h2 {
  font-size: var(--t-section);
  line-height: .92;
  letter-spacing: -.055em;
}
.contact-trame > div p {
  max-width: 32ch;
  margin-bottom: var(--pas-3);
  color: var(--ivoire-douce);
  font-size: var(--t-chapeau);
  line-height: 1.42;
}
.contact-adresse {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bleu);
  color: #AEB5FF;
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: -.035em;
}

/* --------------------------------------------------------------------------
   13. Pied de page
   Quatre colonnes : la marque, puis les trois entrées du site.
   Le logo officiel y est repris en version inverse, à sa taille de respect.
   -------------------------------------------------------------------------- */

.pied {
  background: var(--encre);
  color: var(--ivoire);
  padding-bottom: var(--pas-3);
}

/* Deux rangées seulement : la marque et la navigation en haut, les mentions
   en bas. Le pied prend nettement moins de hauteur qu'en colonnes. */
.pied-trame {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  padding-top: var(--pas-4);
  border-top: 1px solid var(--filet-clair);
}
.pied-marque img { width: 132px; height: auto; object-fit: contain; }
.pied-signature {
  margin: var(--pas-2) 0 0;
  max-width: 22ch;
  color: var(--ivoire);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.2;
}

.pied-navigation { display: grid; gap: var(--pas-3); }
.pied-colonne { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px var(--pas-2); align-items: baseline; }
.pied-titre {
  margin: 0;
  color: #9AA2FF;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pied-colonne ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--pas-3);
}
.pied-colonne a {
  color: var(--ivoire);
  font-size: var(--t-mention);
  transition: color .18s;
}
.pied-colonne a:hover { color: #AAB1FF; }

.pied-coordonnees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--pas-3);
  color: var(--ivoire-douce);
  font-size: var(--t-mention);
}
.pied-coordonnees p { margin: 0; }
.pied-coordonnees a:hover { color: #AAB1FF; }
.pied-coordonnees .avis { display: inline-flex; align-items: center; gap: 8px; }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pas-2) var(--pas-4);
  margin-top: var(--pas-4);
  padding-top: var(--pas-2);
  border-top: 1px solid var(--filet-clair);
  color: #777B85;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pied-bas nav { display: flex; flex-wrap: wrap; gap: var(--pas-3); }
.pied-bas a:hover { color: var(--ivoire); }

/* --------------------------------------------------------------------------
   13 bis. Page Projets
   Trois régimes qui se répondent : un en-tête sombre avec un projet mis en
   avant, une rangée de focus légendés, puis un mur muet où seul le survol
   révèle les noms.
   -------------------------------------------------------------------------- */

/* Sur les pages intérieures, le bandeau est opaque en permanence : il n'y a
   pas d'image plein écran derrière lui, un dégradé y laisserait une bavure. */
.page-interieure { padding-top: 76px; }
.page-interieure .marque { opacity: 1; }
.page-interieure .barre {
  background: rgba(8, 9, 13, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  backdrop-filter: blur(14px);
}
.page-interieure .menu a[aria-current="page"] { color: #AAB1FF; opacity: 1; }

.entete-projets { padding-top: var(--pas-5); }
.entete-projets-trame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: end;
}
.entete-projets h1 {
  font-size: var(--t-titre);
  line-height: .88;
  letter-spacing: -.062em;
}
.entete-projets .chapeau {
  max-width: 34ch;
  margin-top: var(--pas-3);
  font-size: var(--t-chapeau);
  line-height: 1.3;
  color: var(--ivoire-douce);
}
.entete-projets .compte {
  margin-top: var(--pas-4);
  padding-top: var(--pas-2);
  border-top: 1px solid var(--filet-clair);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivoire-douce);
}
.entete-projets .compte b { color: #9AA2FF; font-weight: 500; }

.entete-projets-vue { margin: 0; }
.entete-projets-vue a {
  position: relative;
  display: block;
  overflow: hidden;
  background: #14060F;
}
.entete-projets-vue a::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0 var(--bleu);
  transition: box-shadow .22s var(--sortie);
}
.entete-projets-vue a:hover::after,
.entete-projets-vue a:focus-visible::after { box-shadow: inset 0 0 0 2px var(--bleu); }
.entete-projets-vue img {
  aspect-ratio: 5 / 4;
  transition: transform 1.1s var(--sortie);
}
.entete-projets-vue a:hover img { transform: scale(1.02); }
.entete-projets-vue figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 13px;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ivoire-douce);
}
.entete-projets-vue figcaption b { color: var(--ivoire); font-weight: 500; }
.entete-projets-vue figcaption i { font-style: normal; color: #9AA2FF; }

/* La mise au point se fait sur l'image à son arrivée : c'est la signature
   de l'atelier, transposée du viseur de l'accueil. */
.fondu img { filter: blur(16px); opacity: .5; transition: filter 1.1s var(--sortie), opacity .9s; }
.fondu.est-nette img { filter: none; opacity: 1; }

/* --- Focus projets --- */
.grille-focus-projets {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--pas-2);
}
.focus-projet {
  position: relative;
  overflow: hidden;
  background: #23252A;
  height: clamp(360px, 32vw, 460px);
}
/* Emprises calées sur la définition réelle de chaque visuel : la pleine
   largeur revient aux Vieilles Charrues, dont la source fait 2000 px. Hilbi
   et Les Belles Journées, plus petites, ne sont jamais agrandies. */
.focus-projet:nth-child(1) { grid-column: span 7; }   /* Léo Ange */
.focus-projet:nth-child(2) { grid-column: span 5; }   /* Anne-Laure Bonnassieux */
.focus-projet:nth-child(3) { grid-column: span 12; height: clamp(320px, 27vw, 400px); } /* Vieilles Charrues */
.focus-projet:nth-child(4) { grid-column: span 7; }   /* Les Belles Journées */
.focus-projet:nth-child(5) { grid-column: span 5; }   /* Hilbi */
.focus-projet > img { transition: transform .75s var(--sortie); }
.focus-projet:hover > img { transform: scale(1.02); }
.focus-projet::before {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  box-shadow: inset 0 0 0 0 var(--bleu);
  pointer-events: none;
  transition: box-shadow .22s var(--sortie);
}
.focus-projet:hover::before,
.focus-projet:focus-visible::before { box-shadow: inset 0 0 0 2px var(--bleu); }

/* --- Le tri --- */
.entete--mur { align-items: end; grid-template-columns: minmax(0, 1.04fr) minmax(0, .8fr); }
.tri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-3);
  justify-content: flex-end;
}
.tri button {
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--encre-douce);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.tri button span { margin-left: 6px; color: #A9A59E; }
.tri button:hover { color: var(--encre); }
.tri button.est-actif { color: var(--encre); border-bottom-color: var(--bleu); }
.tri button.est-actif span { color: var(--bleu); }

/* --- Le mur ---
   Grille de douze colonnes sur une trame de dix pixels : chaque tuile déclare
   son emprise, et le remplissage serré comble les vides. C'est ce décalage
   permanent qui empêche le mur de retomber en rangées régulières. */
.mur {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 10px;
  grid-auto-flow: row dense;
  column-gap: var(--pas-2);
}
.tuile {
  position: relative;
  display: block;
  margin-bottom: var(--pas-2);
  overflow: hidden;
  background: #DEDAD3;
}
.tuile img {
  /* La plupart des visuels sont des portraits cadrés haut : on garde le
     tiers supérieur plutôt que de couper les têtes. */
  object-position: 50% 30%;
  transition: transform .7s var(--sortie), filter .4s;
}
.tuile--marque { background: #fff; }
.tuile--marque img { object-fit: contain; padding: clamp(18px, 2vw, 34px); }

.m-a { grid-column: span 5; grid-row: span 44; }
.m-b { grid-column: span 3; grid-row: span 41; }
.m-c { grid-column: span 4; grid-row: span 34; }
.m-d { grid-column: span 3; grid-row: span 30; }
.m-e { grid-column: span 5; grid-row: span 49; }
.m-f { grid-column: span 4; grid-row: span 40; }
.m-g { grid-column: span 4; grid-row: span 51; }
.m-h { grid-column: span 3; grid-row: span 27; }
.m-i { grid-column: span 5; grid-row: span 39; }
.m-j { grid-column: span 6; grid-row: span 49; }
.m-k { grid-column: span 3; grid-row: span 44; }
.m-l { grid-column: span 3; grid-row: span 28; }

/* Aucun nom n'est visible tant qu'on ne s'intéresse pas à la tuile. */
.tuile-info {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 20px;
  background: linear-gradient(180deg,
    rgba(8, 9, 13, .18) 26%,
    rgba(8, 9, 13, .58) 62%,
    rgba(8, 9, 13, .95) 100%);
  color: #fff;
  opacity: 0;
  transition: opacity .28s;
}
.tuile-info b {
  font-family: var(--display);
  font-size: clamp(21px, 1.8vw, 30px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
.tuile-info i {
  max-width: 30ch;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #D6D9F5;
}
.tuile-info em {
  position: absolute;
  right: 16px; top: 14px;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  background: var(--bleu);
  font-style: normal;
  font-size: 15px;
  color: #fff;
}
.tuile::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  box-shadow: inset 0 0 0 0 var(--bleu);
  pointer-events: none;
  transition: box-shadow .22s var(--sortie);
}
.tuile:hover::after,
.tuile:focus-visible::after,
.tuile.est-revelee::after { box-shadow: inset 0 0 0 2px var(--bleu); }

.tuile:hover .tuile-info,
.tuile:focus-visible .tuile-info,
.tuile.est-revelee .tuile-info { opacity: 1; }
.tuile:hover img { transform: scale(1.03); }
.tuile--marque:hover img { transform: none; }

/* Filtrage : la tuile écartée quitte la grille, elle ne reste pas en vide. */
.tuile[hidden] { display: none; }

/* Le décompte n'est pas affiché : il n'est annoncé qu'aux lecteurs d'écran,
   pour qu'un visiteur non voyant sache que le tri a bien pris effet. */
.mur-aide {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13 ter. Pages Accompagnements
   L'entrée se fait par le besoin, pas par la méthode. L'index est une liste
   de huit lignes face à un panneau : le curseur descend, l'image se met au
   point sur le besoin visé. C'est le viseur de l'accueil devenu navigation.
   -------------------------------------------------------------------------- */

/* En-tête sans image : la page s'ouvre sur des mots, ce qui la distingue
   de l'accueil et de Projets, qui s'ouvrent tous deux sur un visuel. */
.entete-texte { padding-block: var(--pas-5) var(--respiration); }
.entete-texte-trame {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .74fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: end;
}
.entete-texte h1 {
  font-size: var(--t-titre);
  line-height: .88;
  letter-spacing: -.062em;
}
.entete-texte .chapeau {
  max-width: 38ch;
  font-size: var(--t-chapeau);
  line-height: 1.32;
  color: var(--ivoire-douce);
}
.entete-texte .compte {
  margin-top: var(--pas-3);
  padding-top: var(--pas-2);
  border-top: 1px solid var(--filet-clair);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivoire-douce);
}
.entete-texte .compte b { color: #9AA2FF; font-weight: 500; }

.fil {
  margin-bottom: var(--pas-4);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivoire-douce);
}
.fil a { color: #9AA2FF; }
.fil a:hover { color: var(--ivoire); }
.fil span[aria-current] { color: var(--ivoire); }

/* --- L'index des huit besoins --- */
.index-besoins {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.index-liste { border-top: 1px solid var(--filet); }

.entree {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px var(--pas-3);
  padding: clamp(18px, 1.9vw, 28px) 0;
  border-bottom: 1px solid var(--filet);
  transition: padding-left .3s var(--sortie);
}
.entree:hover, .entree:focus-visible { padding-left: 18px; }
.entree-mot {
  grid-column: 1;
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 58px);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.05em;
  font-stretch: 92%;
  transition: font-stretch .35s var(--sortie), color .2s;
}
.entree:hover .entree-mot, .entree:focus-visible .entree-mot {
  font-stretch: 106%;
  color: var(--bleu);
}
.entree-phrase {
  grid-column: 1;
  max-width: 46ch;
  font-size: var(--t-mention);
  line-height: 1.42;
  color: var(--encre-douce);
}
.entree-famille {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .06em;
  color: #A9A59E;
  transition: color .2s;
}
.entree:hover .entree-famille, .entree:focus-visible .entree-famille { color: var(--bleu); }

/* Le panneau reste au regard pendant qu'on parcourt la liste. */
.index-panneau {
  position: sticky;
  top: calc(76px + var(--pas-4));
  display: grid;
}
.panneau {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.panneau[data-actif] { opacity: 1; }
/* Le panneau est un diaporama : les vues se relaient toutes les deux secondes
   par un fondu lumineux, l'image entrante arrivant surexposée puis retombant
   à sa densité normale. La rotation s'arrête quand on survole le panneau. */
.panneau-scene {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #E6E2DC;
}
.diapo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: brightness(2.1) saturate(1.25);
  transition: opacity .62s ease, filter .62s ease;
}
.diapo.est-vue { opacity: 1; filter: none; }

/* Les documents et les logos se montrent entiers, jamais recadrés. */
.panneau--contenu-clair .panneau-scene { background: #fff; border: 1px solid var(--filet); }
.panneau--contenu-sombre .panneau-scene { background: var(--encre); }
.panneau--contenu-clair .diapo,
.panneau--contenu-sombre .diapo {
  object-fit: contain;
  padding: clamp(14px, 1.6vw, 28px);
}

/* Le panneau du site reprend l'aperçu animé de la page d'accueil : il garde
   le rapport de la fenêtre de navigateur, pas celui des autres panneaux. */
.panneau--apercu .panneau-scene {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
}
.panneau--apercu .apercu { width: 100%; }
.panneau figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* --- Listes de compétences et de contenu --- */
.competences, .comprend {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet);
}
.competences { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.comprend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.competences li, .comprend li {
  padding: clamp(14px, 1.6vw, 22px) var(--pas-3) clamp(14px, 1.6vw, 22px) 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.comprend li { counter-increment: pas; }
.comprend li::before {
  content: counter(pas, decimal-leading-zero) "  ";
  color: var(--bleu);
}
.comprend { counter-reset: pas; }

/* --- Planche de preuves --- */
.planche--preuves { --h-planche: clamp(300px, 34vw, 430px); }
.plaque-legende, .plaque figcaption {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
  padding: 34px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(8, 9, 13, .9));
  color: #fff;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.plaque-legende b, .plaque figcaption b { font-weight: 500; }
.plaque-legende span, .plaque figcaption span { color: #AEB5FF; }
.plaque-legende i { font-style: normal; }

.plaque--marque {
  width: calc(var(--h-planche) * 1.25);
  background: #fff;
  border: 1px solid var(--filet);
}
.plaque--marque img {
  height: calc(100% - 46px);
  object-fit: contain;
  padding: clamp(20px, 2.2vw, 38px);
}
.plaque--marque figcaption {
  position: static;
  height: 46px;
  padding: 0 16px;
  align-items: center;
  background: none;
  color: var(--encre);
}
.plaque--marque figcaption span { color: var(--encre-douce); }

/* --- Entrée terrain ---
   Le paragraphe d'ouverture est long. En une seule colonne il faisait un mur
   de 800 pixels de haut sur un tiers de la largeur. Réglé en trois colonnes,
   il occupe toute la trame, la mesure de lecture redevient juste, et la
   section tient en un quart de la hauteur. */
.section:has(> .cadre > .terrain) { padding-block: clamp(56px, 6vw, 96px); }
.terrain {
  column-count: 3;
  column-gap: clamp(28px, 4vw, 72px);
  column-rule: 1px solid var(--filet);
  padding-top: var(--pas-3);
  border-top: 1px solid var(--filet);
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.58;
}
.terrain p { margin: 0; }

/* Le texte qui raconte un projet est décalé : la rubrique tient la marge
   gauche, le récit occupe les colonnes suivantes sur deux bandes. */
.incarne {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 9fr);
  gap: clamp(24px, 3vw, 56px);
  padding-top: var(--pas-3);
  border-top: 1px solid var(--filet);
}
.incarne-texte {
  column-count: 2;
  column-gap: clamp(28px, 4vw, 64px);
  color: var(--encre-douce);
  line-height: 1.62;
}
.incarne-texte p { margin: 0; }
.incarne-texte p + p { margin-top: var(--pas-2); }
.incarne .rubrique { margin: 0; padding: 0; border: 0; }

/* --- Trois traitements de preuves, selon la porte d'entrée --- */

/* Site : trois fenêtres côte à côte, resserrées et centrées. Les deux sites
   en ligne s'animent au survol, comme sur la page d'accueil. */
.fenetres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 34px);
  max-width: 1180px;
  margin-inline: auto;
}
.fenetres .apercu-chrome { height: 24px; padding: 0 10px; gap: 5px; }
.fenetres .apercu-chrome span { width: 6px; height: 6px; }
.fenetres figcaption { margin-top: 11px; }
/* Fenêtre en attente de capture : même cadre, même hauteur que les autres. */
.apercu--vide .apercu-fenetre { border-color: var(--filet); }
.apercu--vide .apercu-ecran {
  display: grid;
  place-items: center;
  background-color: var(--encre);
  background-image:
    linear-gradient(135deg, rgba(20, 40, 255, .32), transparent 48%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 11px);
}
.apercu-attente {
  color: #9BA4FF;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Mosaïque : emprises variées sur douze colonnes, plus calme que le mur
   des projets, avec la légende sous chaque pièce. */
.mosaique {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 10px;
  grid-auto-flow: row dense;
  column-gap: var(--pas-2);
}
.mosaique > * { margin-bottom: var(--pas-2); position: relative; overflow: hidden; }
.mosaique .plaque, .mosaique .a-venir { width: auto; height: auto; }
/* Les retombées presse sont recadrées volontairement, comme sur un mur de
   coupures, mais toujours par le bas : le titre de l'article reste lisible. */
.mosaique .plaque--papier { background: #fff; }
.mosaique .plaque--papier img { object-position: 50% 10%; }

/* Les logos, eux, ne se recadrent jamais. */
.mosaique .plaque--marque { background: #fff; border: 1px solid var(--filet); }
.mosaique .plaque--marque img {
  object-fit: contain;
  padding: clamp(22px, 2.4vw, 44px) clamp(22px, 2.4vw, 44px) 52px;
}
.mosaique .plaque--marque .plaque-legende {
  padding: 0 16px;
  height: 44px;
  align-items: center;
  background: none;
  color: var(--encre);
}
.mosaique .plaque--marque .plaque-legende span { color: var(--encre-douce); }

.q-a { grid-column: span 5; grid-row: span 40; }
.q-b { grid-column: span 4; grid-row: span 52; }
.q-c { grid-column: span 3; grid-row: span 34; }
.q-d { grid-column: span 4; grid-row: span 34; }
.q-e { grid-column: span 5; grid-row: span 52; }
.q-f { grid-column: span 3; grid-row: span 40; }
.q-g { grid-column: span 6; grid-row: span 38; }
.q-h { grid-column: span 6; grid-row: span 38; }
.q-i { grid-column: span 4; grid-row: span 44; }

/* --- Les quatre temps du travail --- */
.etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--pas-2);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet);
  counter-reset: etape;
}
.etapes li {
  position: relative;
  padding: var(--pas-3) var(--pas-3) var(--pas-4) 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--display);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.035em;
}
.etapes span {
  display: block;
  margin-bottom: 14px;
  color: var(--bleu);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .06em;
}

/* --- Sortie de page : l'appel et les passerelles partagent la même bande --- */
.sortie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.sortie h2 { font-size: var(--t-section); line-height: .94; letter-spacing: -.055em; }
.sortie > div > p { max-width: 28ch; margin: var(--pas-3) 0; color: var(--ivoire-douce); }
.sortie-passerelles .rubrique { border-top-color: var(--filet-clair); color: #9AA2FF; }
.sortie .passerelles { border-top-color: var(--filet-clair); grid-template-columns: 1fr; }
.sortie .passerelles a { border-bottom-color: var(--filet-clair); padding: var(--pas-2) 0; gap: 4px; }
.sortie .passerelles b { font-size: clamp(21px, 1.9vw, 28px); color: var(--ivoire); }
.sortie .passerelles a:hover b { color: #AAB1FF; }
.sortie .passerelles span { color: var(--ivoire-douce); }

/* --- Passerelles vers les autres portes --- */
.passerelles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--pas-2);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet);
}
.passerelles a {
  display: grid;
  gap: 8px;
  padding: var(--pas-3) var(--pas-3) var(--pas-4) 0;
  border-bottom: 1px solid var(--filet);
  transition: padding-left .3s var(--sortie);
}
.passerelles a:hover { padding-left: 14px; }
.passerelles b {
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 600;
  letter-spacing: -.045em;
  transition: color .2s;
}
.passerelles a:hover b { color: var(--bleu); }
.passerelles span { color: var(--encre-douce); font-size: var(--t-mention); line-height: 1.4; }

/* --- Renvoi vers les autres points d'entrée --- */
.autres-entrees { margin-top: var(--pas-5); padding-top: var(--pas-2); border-top: 1px solid var(--filet); }
.autres-entrees ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-2) var(--pas-3);
  margin: var(--pas-2) 0 0;
  padding: 0;
  list-style: none;
}
.autres-entrees a {
  font-family: var(--display);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--encre-douce);
  transition: color .2s;
}
.autres-entrees a:hover { color: var(--bleu); }

/* --------------------------------------------------------------------------
   13 quater. L'atelier, Contact, pages légales
   -------------------------------------------------------------------------- */

/* --- L'atelier --- */
.atelier-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.atelier-page-texte p { color: var(--encre-douce); line-height: 1.58; }
.atelier-page-texte p + p { margin-top: var(--pas-2); }
.atelier-page-texte .regard-chapeau { color: var(--encre); }
.atelier-page-portrait { position: relative; margin: 0; }
.atelier-page-portrait img { aspect-ratio: 3 / 4; object-position: center 22%; }

/* Méthode : six temps, numérotés, sur filets. */
.methode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--pas-2);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet);
}
.methode li {
  padding: var(--pas-3) var(--pas-3) var(--pas-4) 0;
  border-bottom: 1px solid var(--filet);
}
.methode span {
  display: block;
  margin-bottom: 12px;
  color: var(--bleu);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .06em;
}
.methode h3 {
  margin-bottom: 9px;
  font-size: clamp(24px, 2.2vw, 34px);
  letter-spacing: -.04em;
}
.methode p { max-width: 34ch; color: var(--encre-douce); font-size: var(--t-mention); line-height: 1.5; }

/* --- Contact : les deux portes --- */
.portes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pas-2); }
.porte {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 320px;
  padding: clamp(26px, 3vw, 46px);
  border: 1px solid var(--filet);
  transition: border-color .25s, background .25s, transform .4s var(--sortie);
}
.porte:hover, .porte:focus-visible { border-color: var(--bleu); transform: translateY(-3px); }
.porte-mot {
  max-width: 12ch;
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.05em;
}
.porte-phrase { max-width: 38ch; color: var(--encre-douce); line-height: 1.5; }
.porte-fleche {
  position: absolute;
  right: clamp(22px, 2.4vw, 38px);
  bottom: clamp(22px, 2.4vw, 38px);
  color: var(--bleu);
  font-size: 22px;
}
.porte--pleine { background: var(--encre); color: var(--ivoire); border-color: var(--encre); }
.porte--pleine .porte-phrase { color: var(--ivoire-douce); }
.porte--pleine .porte-fleche { color: #9AA2FF; }
.porte--pleine:hover { border-color: var(--bleu); }

/* --- Contact : la composition du message --- */
.ecrire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pas-3) var(--pas-2);
  max-width: 900px;
}
.champ { display: grid; gap: 9px; margin: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.champ input, .champ textarea {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid #B8B5AE;
  background: none;
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-courant);
  transition: border-color .2s;
}
.champ textarea { resize: vertical; line-height: 1.5; }
.champ input:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--bleu); }
.champ input::placeholder, .champ textarea::placeholder { color: #A9A59E; }
.ecrire button { cursor: pointer; }
.ecrire-note {
  display: block;
  max-width: 52ch;
  margin-top: var(--pas-2);
  color: var(--encre-douce);
  font-size: var(--t-mention);
  line-height: 1.5;
}
.ecrire-repli { margin-top: var(--pas-4); color: var(--encre-douce); }
.contact-adresse--clair { color: var(--bleu); }

/* --- Pages légales --- */
.texte-legal { max-width: 74ch; }
.texte-legal h2 {
  margin: var(--pas-5) 0 var(--pas-2);
  padding-top: var(--pas-2);
  border-top: 1px solid var(--filet);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -.035em;
}
.texte-legal h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.texte-legal p { color: var(--encre-douce); line-height: 1.62; }
.texte-legal p + p { margin-top: var(--pas-2); }
.texte-legal a { color: var(--bleu); border-bottom: 1px solid rgba(20, 40, 255, .3); }
.texte-legal a:hover { border-bottom-color: var(--bleu); }
.texte-legal .maj {
  margin-top: var(--pas-5);
  padding-top: var(--pas-2);
  border-top: 1px solid var(--filet);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --- 404 --- */
.liens-404 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-2) var(--pas-3);
  margin: var(--pas-3) 0 0;
  padding: 0;
  list-style: none;
}
.liens-404 a {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9AA2FF;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(154, 162, 255, .35);
}
.liens-404 a:hover { color: var(--ivoire); border-bottom-color: var(--ivoire); }

/* --------------------------------------------------------------------------
   14. Tablette — jusqu'à 1080 px
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .entete           { grid-template-columns: 1fr; gap: var(--pas-3); align-items: start; }
  .regard-trame     { grid-template-columns: 1fr; gap: var(--pas-4); }
  .regard-titre,
  .regard-texte     { grid-column: 1; }
  .regard-texte     { max-width: 44ch; }
  .grille-focus     { grid-template-columns: 1fr; --h-rang-1: 460px; --h-rang-2: 460px; }
  .carte-focus--large,
  .carte-focus--haute,
  .carte-focus--presse,
  .carte-focus--belles { grid-column: 1; }
  .action-scene     { grid-template-columns: 116px minmax(0, 1fr); gap: var(--pas-4); }
  .grille-autres    { grid-template-columns: 1fr; }
  .carte-autre      { min-height: 460px; }
  .atelier-trame    { grid-template-columns: 1fr; gap: var(--pas-4); }
  .contact-trame    { grid-template-columns: 1fr; gap: var(--pas-4); }
  .entete-texte-trame { grid-template-columns: 1fr; gap: var(--pas-3); align-items: start; }
  .index-besoins    { grid-template-columns: 1fr; gap: var(--pas-4); }
  .atelier-page     { grid-template-columns: 1fr; gap: var(--pas-4); }
  .atelier-page-portrait { max-width: 380px; }
  .methode          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes           { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terrain          { column-count: 2; }
  .incarne          { grid-template-columns: 1fr; gap: var(--pas-2); }
  .fenetres         { grid-template-columns: 1fr 1fr; }
  .sortie           { grid-template-columns: 1fr; gap: var(--pas-4); }
  .passerelles      { grid-template-columns: 1fr; }
  .portes           { grid-template-columns: 1fr; }
  .index-panneau    { position: relative; top: auto; order: -1; }
  .competences      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comprend         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-trame       { grid-template-columns: 1fr; row-gap: var(--pas-4); }
}

/* --------------------------------------------------------------------------
   15. Mobile — jusqu'à 820 px
   Principe : pleine largeur réelle, une seule colonne, et l'on ne conserve
   que deux animations, le viseur et la séquence de l'atelier en action.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  :root {
    --gouttiere: 18px;
    --viseur-r: 116px;
    --t-titre:   clamp(38px, 10.4vw, 56px);
    --t-section: clamp(34px, 9.2vw, 50px);
    --t-carte:   clamp(30px, 8.6vw, 42px);
    --t-chapeau: 19px;
    --t-courant: 16px;
    --t-mention: 15px;
    --respiration: clamp(64px, 13vw, 84px);
  }

  /* Navigation plein écran. */
  .barre .cadre { height: 62px; }
  .marque { width: 88px; position: relative; z-index: 103; }

  .bouton-menu {
    position: relative;
    z-index: 104;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .bouton-menu span {
    width: 24px; height: 1px;
    background: #fff;
    transform-origin: center;
    transition: transform .25s var(--sortie);
  }
  .barre.menu-ouvert .bouton-menu span:first-child { transform: translateY(4px)  rotate(45deg); }
  .barre.menu-ouvert .bouton-menu span:last-child  { transform: translateY(-4px) rotate(-45deg); }

  .menu {
    position: fixed;
    z-index: 102;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    height: 100dvh;
    padding: 110px var(--gouttiere) 32px;
    background: rgba(8, 9, 13, .97);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .32s var(--sortie), opacity .24s, visibility 0s .32s;
  }
  .barre.menu-ouvert .menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform .32s var(--sortie), opacity .24s;
  }
  .menu a {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: #fff;
    font-family: var(--display);
    font-size: clamp(30px, 9vw, 46px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.045em;
    text-transform: none;
    opacity: 1;
  }

  /* En-tête : le viseur reste, piloté au doigt. */
  .viseur-scene { min-height: 660px; cursor: auto; }
  .plan--flou { filter: blur(20px) saturate(.7); opacity: 1; transform: scale(1.07); }
  .reticule   { width: 150px; height: 150px; }
  .vue--leo { inset: 0 0 auto 0; width: 100%; height: 48%; }
  .vue--leo img { object-position: 50% 30%; }
  .vue--alb { inset: 48% auto 0 0; width: 52%; height: 52%; }
  .vue--alb img { object-position: 58% 50%; }
  .vue--gm  { inset: auto 0 0 auto; width: 48%; height: 52%; }
  .vue--gm img { object-position: 58% 35%; }

  .viseur-logo { width: min(196px, 56vw); }
  .viseur-pied { grid-template-columns: 1fr auto; gap: 10px var(--pas-2); margin-top: var(--pas-3); }
  .viseur-pied .contexte { grid-column: 1 / -1; white-space: normal; }
  .viseur-pied .avis    { grid-column: 1; justify-self: start; }
  .viseur-pied .entrer  { grid-column: 2; justify-self: end; }

  /* Cartes : texte lisible sur toutes les images. */
  .grille-focus { --h-rang-1: 400px; --h-rang-2: 400px; }
  .voile {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 28%,
      rgba(0, 0, 0, .1) 46%, rgba(0, 0, 0, .6) 72%, rgba(0, 0, 0, .92) 100%);
  }
  .meta, .legende, .decouvrir { text-shadow: 0 1px 12px rgba(0, 0, 0, .62); }
  .meta      { inset: 14px 14px auto; gap: 10px; }
  .meta span:last-child { max-width: 56%; }
  .legende   { inset: auto 14px 46px; }
  .legende p { max-width: 32ch; font-size: 14px; }
  .decouvrir { right: 14px; bottom: 14px; }

  /* L'atelier en action garde sa séquence, recalibrée pour le smartphone. */
  .action        { height: 235svh; }
  .action-collee { min-height: 620px; padding-block: 78px var(--pas-3); }
  .action-collee .entete h2 { max-width: 14ch; }
  .action-scene  { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
  .action-numero { font-size: 52px; }
  .action-volets { min-height: 168px; }
  .volet h3      { font-size: clamp(27px, 7.6vw, 36px); }
  .volet p       { margin-top: 12px; font-size: var(--t-mention); line-height: 1.5; }
  .action-rail button { padding: 12px 4px 0 0; font-size: 0; }
  .action-rail button span { display: block; margin: 0; font-size: var(--t-etiquette); }

  /* Réalisations : les planches se poussent au doigt, le répertoire
     d'identités passe sur deux colonnes. */
  .planche {
    --h-planche: 260px;
    grid-template-columns: 60px minmax(0, 1fr);
    padding: var(--pas-2) 0 var(--pas-3);
  }
  .planche--imagerie { --h-planche: clamp(230px, 64vw, 310px); }
  .planche--artwork  { --h-planche: clamp(240px, 68vw, 320px); }
  .clip-legende { inset: auto 12px 12px; }
  .piste { padding-right: 14vw; }
  .large, .moyen { width: 76vw; }
  .carre { width: 62vw; }
  .planche--sites { grid-template-columns: 1fr; }
  .planche--sites .planche-titre { grid-row: auto; }
  .repertoire { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .marque-client { padding: 22px; }
  .carte-autre   { min-height: 380px; }
  .carte-autre > div:not(.voile) { inset: auto 16px 28px; }
  .carte-autre p { max-width: 28ch; font-size: var(--t-mention); }

  /* L'atelier reste volontairement statique : deux animations suffisent. */
  .atelier { height: auto; }
  /* `clip` retient le pictogramme, qui vient volontairement mordre le bord droit. */
  .atelier-collee { position: relative; display: block; height: auto; overflow: clip; padding-block: var(--respiration); }
  .atelier-picto {
    left: auto; right: -18px; top: 42px;
    width: min(62vw, 250px);
    opacity: .12;
    filter: none;
    transform: none;
  }
  .arrivee { opacity: 1; filter: none; transform: none; }
  .atelier-corps { max-width: none; margin-top: var(--pas-3); }
  .atelier-portrait { width: 142px; margin-top: var(--pas-3); }
  .atelier-portrait img { height: 194px; }

  .index-panneau { display: none; }
  .methode, .etapes { grid-template-columns: 1fr; }
  .terrain { column-count: 1; padding-top: var(--pas-2); }
  .incarne-texte { column-count: 1; }
  .fenetres { grid-template-columns: 1fr; }
  .mosaique { grid-auto-rows: 6px; }
  .q-a,.q-b,.q-c,.q-d,.q-e,.q-f,.q-g,.q-h,.q-i { grid-column: span 6; }
  .q-a,.q-d,.q-g,.q-h { grid-row: span 46; }
  .q-b,.q-e { grid-row: span 62; }
  .q-c,.q-f,.q-i { grid-row: span 52; }
  .porte { min-height: 0; }
  .ecrire { grid-template-columns: 1fr; }
  .entree { grid-template-columns: minmax(0, 1fr) auto; }
  .competences, .comprend { grid-template-columns: 1fr; }
  .planche--preuves { --h-planche: clamp(240px, 66vw, 320px); }
  .pied-trame { grid-template-columns: 1fr; row-gap: var(--pas-3); }
  .pied-colonne { grid-template-columns: 1fr; gap: 6px; }
  .pied-bas   { flex-direction: column; gap: var(--pas-2); }
}

/* --------------------------------------------------------------------------
   16. Accessibilité — mouvement réduit
   Toutes les mises en scène tombent, la composition reste.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .viseur-scene { cursor: auto; }
  .plan--flou   { filter: none; opacity: .5; transform: none; }
  .plan--net    { -webkit-mask-image: none; mask-image: none; }
  .reticule     { display: none; }
  .action, .atelier { height: auto; }
  .action-collee, .atelier-collee {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }
  .action-collee { display: block; padding-block: var(--respiration); }
  .action-volets { display: grid; gap: var(--pas-4); min-height: 0; }
  .volet, .volet.est-actif {
    grid-area: auto;
    opacity: 1;
    filter: none;
    transform: none;
    pointer-events: auto;
  }
  .action-numero, .action-rail { display: none; }
  .atelier-collee { display: block; }
  .arrivee, .atelier-picto { opacity: 1; filter: none; transform: none; }
  .atelier-picto { opacity: .12; }
  .hublot { overflow-x: auto; }
  .mise-au-point { font-stretch: 100%; letter-spacing: -.055em; }
}

/* Repère de tabulation visible, sur les deux fonds. */
:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
}
.section--encre :focus-visible,
.pied :focus-visible,
.barre :focus-visible { outline-color: #8F99FF; }


/* --------------------------------------------------------------------------
   17. Pages expertises et projets focus
   Ces pages ont leur propre composition : le récit y rejoint ses images au
   lieu de les précéder. Les règles ci-dessous ne concernent qu'elles. Celles
   dont la classe existe ailleurs sur le site sont explicitement cantonnées
   aux corps portant .expertise ou .page-focus, pour ne rien déplacer sur
   l'accueil, Projets ou l'index des accompagnements.
   -------------------------------------------------------------------------- */
.evitement {
  position: fixed;
  top: 12px;
  left: 18px;
  z-index: 500;
  background: var(--ivoire);
  color: var(--encre);
  padding: 12px 20px;
  transform: translateY(-180%);
}

.evitement:focus {
  transform: none;
}

.expertise :is(.fil),
.page-focus :is(.fil) {
  line-height: 1.7;
  letter-spacing: .025em;
}

.expertise :is(.rubrique),
.page-focus :is(.rubrique) {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}

.expertise :is(.lien-texte),
.page-focus :is(.lien-texte) {
  font-size: 12px;
  min-height: 44px;
  line-height: 1.5;
}

.expertise :is(.contact-adresse),
.page-focus :is(.contact-adresse) {
  overflow-wrap: anywhere;
}

.expertise :is(.entete-texte h1),
.page-focus :is(.entete-texte h1),
.entete-projets h1 {
  line-height: .99;
}


/* --- Pages expertises — en-tête, ouverture, récit --- */
.expert-hero {
  padding-block: 48px 64px;
}

.expert-hero .entete-texte-trame {
  grid-template-columns: minmax(0,1.45fr) minmax(0,.8fr);
  gap: clamp(32px,5vw,88px);
}

.expert-hero h1 {
  font-family: var(--display);
  font-size: clamp(44px,5.1vw,82px);
  line-height: 1.02;
  letter-spacing: -.05em;
  max-width: 23ch;
}

.expert-hero .chapeau {
  font-size: clamp(19px,1.55vw,24px);
  line-height: 1.45;
  color: var(--ivoire-douce);
  max-width: 34ch;
}

.expert-hero .compte {
  font-size: 12px;
  line-height: 1.5;
}

.expert-intro {
  padding-block: clamp(36px,4.4vw,64px);
}

.expert-intro>.cadre {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,.55fr);
  gap: 36px;
  align-items: end;
}

.expert-intro .terrain {
  max-width: 70ch;
  border: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.65;
}

.expert-intro .lien-texte {
  justify-self: end;
  align-self: end;
  margin: 0;
  white-space: nowrap;
}

.expert-cas {
  padding-block: 0 58px;
}

.expert-cas .rubrique {
  margin-bottom: 30px;
}

.cas-editorial {
  display: grid;
  grid-template-columns: minmax(0,1.16fr) minmax(0,.84fr);
  gap: clamp(28px,4.5vw,76px);
  align-items: center;
}

.cas-editorial>* {
  min-width: 0;
}

.cas-texte {
  max-width: 58ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--encre-douce);
}

.cas-texte p+p {
  margin-top: 22px;
}

.cas-texte .lien-texte {
  color: var(--encre);
}


/* --- Les pièces : l'image, puis sa légende dessous --- */
.piece {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: visible;
}

.piece>img,
.piece>.image-ouvrable>img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.piece>img,
.piece>.image-ouvrable {
  aspect-ratio: 4/3;
}

.piece>.image-ouvrable {
  display: block;
  position: relative;
  overflow: hidden;
  background: #e9e5df;
}

.piece>.image-ouvrable>img {
  height: 100%;
}

.piece figcaption,
.piece-legende {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  background: none;
  padding: 13px 0 0;
  margin: 0;
  color: var(--encre);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.piece figcaption b,
.piece-legende b {
  font-weight: 500;
}

.piece figcaption span,
.piece-legende span {
  color: var(--encre-douce);
}

.piece .image-ouvrable::after {
  content: '+';
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--encre);
  color: white;
  font: 22px var(--texte);
  opacity: .9;
}

.image-ouvrable:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 4px;
}

.piece--logo>img,
.piece--logo>.image-ouvrable {
  aspect-ratio: 4/3;
  background: white;
}

.piece--logo>.image-ouvrable>img,
.piece--logo>img {
  object-fit: contain;
  padding: 28px;
}

.piece--document>.image-ouvrable,
.piece--document>img {
  aspect-ratio: auto;
  background: white;
}

.piece--document>.image-ouvrable>img {
  height: auto;
  object-fit: contain;
}

.piece--artwork>img {
  aspect-ratio: 1;
  object-fit: contain;
}

.duo-recits {
  display: grid;
  gap: 68px;
}

.duo-recits>.cas-editorial+.cas-editorial {
  padding-top: 44px;
  border-top: 1px solid var(--filet);
}

.duo-recits>.cas-editorial:nth-child(2) {
  grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr);
}

.duo-recits>.cas-editorial:nth-child(2)>.piece {
  order: 2;
}

.duo-recits>.cas-editorial:nth-child(2)>.cas-texte {
  order: 1;
}

.expert-selection {
  padding-block: 36px 58px;
  background: var(--ivoire-clair);
}

.expert-selection .rubrique {
  margin-bottom: 30px;
}


/* --- Une grille propre à chaque type de preuve --- */
.selection-sites,
.selection-deux,
.selection-films,
.selection-documents {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 42px 28px;
  align-items: start;
}

.selection-trois,
.selection-logos {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 34px 24px;
  align-items: start;
}

.selection-films>.piece:first-child {
  grid-column: 1/-1;
  max-width: 940px;
  width: 100%;
  margin-inline: auto;
}

.piece--film {
  display: block;
  color: var(--encre);
}

.piece--film>img {
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: filter .2s;
}

.piece--film:hover>img {
  filter: brightness(.88);
}

.lecture-film {
  position: absolute;
  left: 22px;
  top: 22px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: white;
  background: rgba(8,9,13,.8);
  font-size: 18px;
  border: 1px solid rgba(255,255,255,.5);
}

.selection-documents {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.selection-documents .image-ouvrable {
  aspect-ratio: 3/4;
  display: grid;
  align-items: start;
  overflow: hidden;
}

.selection-documents .image-ouvrable img {
  height: 100%;
  object-fit: contain;
  object-position: top;
}

.selection-photos {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 38px 24px;
  align-items: start;
}

.selection-photos .piece:nth-child(3) {
  grid-column: 1/-1;
  max-width: 950px;
  width: 100%;
  margin-inline: auto;
}

.selection-photos .image-ouvrable {
  aspect-ratio: auto;
}

.selection-photos .image-ouvrable img {
  height: auto;
}

.ensemble-projet,
.campagne-pieces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.ensemble-projet>.piece:first-child,
.campagne-pieces>.piece:first-child {
  grid-column: 1/-1;
}

.ensemble-projet>.piece:first-child img {
  aspect-ratio: 16/10;
}

.ensemble-projet>.piece:nth-child(2) img,
.campagne-pieces>.piece:first-child img {
  aspect-ratio: 1;
  object-fit: contain;
}

.ensemble-projet>.piece:last-child img,
.campagne-pieces>.piece:last-child img {
  aspect-ratio: 1280/742;
}

.ensemble-projet figcaption,
.campagne-pieces figcaption {
  font-size: 12px;
}

.identites-pilotes {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.identites-pilotes .piece--logo img {
  padding: 18px;
}

.expert-methode {
  padding-block: 42px 52px;
}

.expert-methode .rubrique {
  margin-bottom: 20px;
}

.expertise :is(.etapes li),
.page-focus :is(.etapes li) {
  font-size: clamp(18px,1.5vw,23px);
  line-height: 1.35;
  padding: 20px 18px 22px 0;
  letter-spacing: -.02em;
}

.expertise :is(.etapes span),
.page-focus :is(.etapes span) {
  font-size: 12px;
  margin-bottom: 10px;
}

.expert-sortie {
  padding-block: 58px;
}

.expertise :is(.sortie h2),
.page-focus :is(.sortie h2) {
  font-size: clamp(34px,3.6vw,58px);
  line-height: 1.06;
}

.expertise :is(.sortie .rubrique),
.page-focus :is(.sortie .rubrique) {
  font-size: 12px;
  line-height: 1.5;
}

.expertise :is(.sortie .passerelles b),
.page-focus :is(.sortie .passerelles b) {
  font-size: 24px;
}

.expertise :is(.sortie .passerelles span),
.page-focus :is(.sortie .passerelles span) {
  font-size: 15px;
  line-height: 1.5;
}

.expertise :is(.passerelles a:hover),
.page-focus :is(.passerelles a:hover) {
  padding-left: 0;
}


/* --- Démonstration de site : fenêtre, ou téléphone sur petit écran --- */
.site-demonstration {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.site-demonstration .apercu-ecran {
  aspect-ratio: 1280/742;
  border-radius: 0;
}

.site-demonstration .apercu-fenetre {
  border-radius: 0;
  padding: 0;
  background: white;
}

.site-demonstration .apercu-chrome {
  height: 28px;
  background: #edeae4;
  justify-content: flex-start;
  padding: 0 12px;
}

.site-demonstration .apercu-chrome span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c6c2ba;
}

.site-demonstration .apercu-chrome span+span {
  display: block;
}

.expertise :is(.apercu-bouton),
.page-focus :is(.apercu-bouton) {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  min-height: 44px;
  max-width: calc(100% - 20px);
  padding: 10px 14px;
  right: 10px;
  bottom: 10px;
  opacity: 1;
  background: rgba(8,9,13,.94);
}

.expertise :is(.apercu.est-lue .apercu-bouton),
.page-focus :is(.apercu.est-lue .apercu-bouton) {
  opacity: 1;
}

.expertise :is(.apercu:focus-visible),
.page-focus :is(.apercu:focus-visible) {
  outline: 2px solid var(--bleu);
  outline-offset: 5px;
}

.expertise :is(.apercu figcaption),
.page-focus :is(.apercu figcaption) {
  font-size: 12px;
  line-height: 1.6;
}

.site-demonstration>.lien-texte {
  margin-top: 8px;
}

.selection-sites>.piece>img {
  aspect-ratio: 1280/742;
  object-fit: contain;
  background: white;
}


/* --- Visionneuse plein écran --- */
.visionneuse {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 72px 24px 28px;
  border: 0;
  background: #08090df5;
  color: white;
  overflow: auto;
}

.visionneuse:not([open]) {
  display: none;
}

.visionneuse::backdrop {
  background: #08090df0;
}

.visionneuse figure {
  width: min(1800px,100%);
  margin: auto;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.visionneuse img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 150px);
  object-fit: contain;
}

.visionneuse figcaption {
  font-size: 15px;
  text-align: center;
}

.visionneuse-fermer {
  position: fixed;
  right: 20px;
  top: 16px;
  min-height: 44px;
  background: var(--ivoire);
  color: var(--encre);
  border: 0;
  padding: 10px 18px;
  cursor: pointer;
}

.visionneuse-original {
  font-size: 14px;
  color: white;
  text-decoration: underline;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.image-ouverte {
  overflow: hidden;
}


/* --- Pages projets focus --- */
.focus-expertises {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 30px;
}

.focus-expertise {
  padding: 22px 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.3;
}

.focus-expertise::after {
  content: ' ↗';
  color: var(--bleu);
}

.focus-contact-titre {
  font-size: clamp(34px,4vw,60px);
  line-height: 1.1;
}

.focus-recit .piece>img {
  height: auto;
  max-height: 660px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top;
}

.page-focus .expert-hero h1 {
  max-width: 18ch;
}


@media (hover:none) {
  .expertise :is(.apercu:hover .apercu-fenetre),
  .page-focus :is(.apercu:hover .apercu-fenetre) {
    transform: none;
  }

}

@media (max-width:1080px) {
  .expert-hero .entete-texte-trame {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .expert-hero .chapeau {
    max-width: 48ch;
  }

  .expert-hero .compte {
    max-width: 48ch;
  }

  .cas-editorial {
    gap: 28px;
    grid-template-columns: 1fr 1fr;
  }

  .cas-texte {
    font-size: 16px;
  }

  .expert-intro>.cadre {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .expert-intro .lien-texte {
    justify-self: start;
  }

  .selection-documents {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .entete-projets-trame {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .entete-projets-vue {
    max-width: 800px;
  }

  .focus-projet:nth-child(n) {
    grid-column: auto;
    height: 420px;
  }

  .focus-projet:nth-child(3) {
    grid-column: 1/-1;
  }

}

@media (max-width:820px) {
  .expert-hero {
    padding-block: 28px 38px;
  }

  .expert-hero h1 {
    font-size: clamp(35px,7.6vw,56px);
    line-height: 1.06;
    letter-spacing: -.04em;
    max-width: 24ch;
    overflow-wrap: anywhere;
  }

  .expert-hero .fil {
    margin-bottom: 26px;
    font-size: 12px;
  }

  .expert-hero .chapeau {
    font-size: 19px;
  }

  .expert-intro {
    padding-block: 32px 40px;
  }

  .expert-intro .terrain {
    font-size: 17px;
    line-height: 1.65;
  }

  .cas-editorial,
  .duo-recits>.cas-editorial:nth-child(2) {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .duo-recits>.cas-editorial:nth-child(2)>.piece,
  .duo-recits>.cas-editorial:nth-child(2)>.cas-texte {
    order: initial;
  }

  .cas-texte {
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.65;
  }

  .expert-cas {
    padding-bottom: 40px;
  }

  .duo-recits {
    gap: 40px;
  }

  .duo-recits>.cas-editorial+.cas-editorial {
    padding-top: 32px;
  }

  .selection-sites,
  .selection-deux,
  .selection-trois,
  .selection-films,
  .selection-documents,
  .selection-photos {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .selection-photos .piece:nth-child(3),
  .selection-films>.piece:first-child {
    grid-column: auto;
  }

  .selection-logos {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px 14px;
  }

  .piece--logo>.image-ouvrable>img {
    padding: 18px;
  }

  .selection-documents .image-ouvrable {
    aspect-ratio: auto;
  }

  .selection-documents .image-ouvrable img {
    height: auto;
    max-height: 620px;
    object-fit: contain;
  }

  .expert-methode {
    padding-block: 32px 38px;
  }

  .expertise :is(.etapes),
  .page-focus :is(.etapes) {
    grid-template-columns: 1fr;
  }

  .expertise :is(.etapes li),
  .page-focus :is(.etapes li) {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 12px;
    align-items: baseline;
    padding: 17px 0;
    font-size: 20px;
  }

  .expertise :is(.etapes span),
  .page-focus :is(.etapes span) {
    margin: 0;
    font-size: 12px;
  }

  .expert-sortie {
    padding-block: 42px;
  }

  .expertise :is(.sortie h2),
  .page-focus :is(.sortie h2) {
    font-size: 36px;
  }

  .expertise :is(.sortie .rubrique),
  .page-focus :is(.sortie .rubrique) {
    font-size: 12px;
  }

  .expertise :is(.sortie .passerelles b),
  .page-focus :is(.sortie .passerelles b) {
    font-size: 23px;
  }

  .focus-projet:nth-child(n) {
    grid-column: 1;
    height: 420px;
  }

  .focus-expertises {
    grid-template-columns: 1fr;
  }

  .focus-recit .piece>img {
    max-height: 520px;
  }

}

@media (max-width:767px),(max-width:1023px) and (orientation:portrait) {
  .site-demonstration {
    width: min(320px,100%);
    justify-self: center;
    margin-inline: auto;
  }

  .site-demonstration .apercu-ecran {
    aspect-ratio: 540/960;
    border-radius: 13px;
  }

  .site-demonstration .apercu-fenetre {
    padding: 7px;
    border-radius: 20px;
    background: var(--encre);
  }

  .site-demonstration .apercu-chrome {
    height: 15px;
    background: none;
    justify-content: center;
    padding: 0;
  }

  .site-demonstration .apercu-chrome span:first-child {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: #3c3f47;
  }

  .site-demonstration .apercu-chrome span+span {
    display: none;
  }

  .expertise :is(.apercu:not(.site-demonstration)),
  .page-focus :is(.apercu:not(.site-demonstration)) {
    width: min(300px,100%);
  }

  .site-demonstration figcaption {
    justify-content: flex-start;
    text-align: left;
  }

}

@media (max-width:540px) {
  .selection-logos {
    grid-template-columns: 1fr 1fr;
  }

  .selection-logos .piece--logo>.image-ouvrable>img {
    padding: 12px;
  }

  .identites-pilotes {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .identites-pilotes .piece--logo img {
    padding: 12px;
  }

  .ensemble-projet,
  .campagne-pieces {
    gap: 12px;
  }

  .piece figcaption,
  .piece-legende {
    font-size: 12px;
  }

  .visionneuse {
    padding-inline: 12px;
  }

}

@media (prefers-reduced-motion:reduce) {
  .piece--film>img {
    transition: none;
  }

}


/* --- Raccord : sur les pages expertises, les légendes des fenêtres de site
       suivent le même traitement que celles des autres pièces, en bas de
       casse, pour ne pas cohabiter avec des capitales sans raison. --- */
:is(.expertise, .page-focus) .apercu figcaption {
  text-transform: none;
  letter-spacing: 0;
  color: var(--encre);
}
:is(.expertise, .page-focus) .apercu figcaption span { color: var(--encre-douce); }


/* --------------------------------------------------------------------------
   18. Finition mobile
   Ces réglages recomposent pour le téléphone les blocs qui, sinon, ne font
   que rétrécir. Ils viennent en fin de feuille pour rester lisibles comme un
   ensemble, et n'agissent qu'en dessous des largeurs indiquées.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  /* En-tête de la page Projets. En colonne unique : le titre prend la
     largeur, le texte suit, le visuel ferme. Le titre tient en deux lignes
     jusqu'à 360 px, trois en dessous. */
  .entete-projets { padding-block: var(--pas-4) var(--pas-5); }
  .entete-projets-trame {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pas-3);
    align-items: start;
  }
  .entete-projets h1 {
    max-width: none;
    font-size: clamp(40px, 12.4vw, 62px);
    line-height: .96;
    letter-spacing: -.05em;
  }
  .entete-projets .chapeau {
    max-width: 40ch;
    margin-top: var(--pas-2);
    font-size: 17px;
    line-height: 1.5;
  }
  .entete-projets .compte {
    margin-top: var(--pas-3);
    line-height: 1.7;
  }
  .entete-projets-vue { margin-top: var(--pas-2); max-width: none; }
  .entete-projets-vue img { aspect-ratio: 4 / 3; }
  .entete-projets-vue figcaption { margin-top: 10px; }
}

@media (max-width: 900px) {

  /* Focus projets. Une carte par ligne, mais d'une hauteur mesurée : ils
     gardent leur avance sur le reste sans occuper un écran chacun. */
  .grille-focus-projets { grid-template-columns: 1fr; gap: var(--pas-2); }
  .focus-projet:nth-child(n) {
    grid-column: 1;
    height: clamp(300px, 66vw, 420px);
  }
  .focus-projet .legende { inset: auto 16px 44px; }
  .focus-projet .legende h3 { font-size: clamp(28px, 8vw, 40px); }
  .focus-projet .legende p { max-width: 30ch; font-size: 15px; }
  .focus-projet .meta { inset: 14px 14px auto; font-size: 10px; }
  .focus-projet .meta span:last-child { max-width: 52%; }
  .focus-projet .decouvrir { right: 14px; bottom: 14px; }

  /* Le mur. Deux colonnes, un rapport proche de celui des photographies pour
     que le recadrage reste léger, et une pièce pleine largeur tous les cinq
     projets pour casser la régularité. C'est une grille, pas une pile
     d'affiches. */
  .mur {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap: var(--pas-2);
  }
  .mur > .tuile {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    margin: 0;
    aspect-ratio: 4 / 3;
  }
  .mur > .tuile:nth-child(5n + 1) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
  .mur > .tuile--marque { aspect-ratio: 4 / 3; }
  .mur > .tuile--marque img { padding: 14px; }

  /* Sans survol, le nom reste affiché : on doit savoir ce qu'on regarde. */
  .tuile-info {
    opacity: 1;
    padding: 14px;
    gap: 5px;
    background: linear-gradient(180deg, transparent 34%, rgba(8, 9, 13, .92));
  }
  .tuile-info b { font-size: clamp(17px, 4.6vw, 22px); }
  .tuile-info i {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.45;
  }
  .tuile-info em { right: 12px; top: 12px; width: 28px; height: 28px; font-size: 13px; }

  /* Le tri passe en ligne sous le titre, avec des cibles confortables. */
  .entete--mur { grid-template-columns: 1fr; gap: var(--pas-3); }
  .tri { justify-content: flex-start; gap: 4px var(--pas-3); }
  .tri button { min-height: 44px; padding: 10px 0; }
}

@media (max-width: 380px) {
  /* Sur les plus petits écrans, deux colonnes restent lisibles à condition
     de resserrer la légende. */
  .tuile-info { padding: 11px; }
  .tuile-info b { font-size: 16px; }
  .tuile-info i { -webkit-line-clamp: 1; }
}

@media (max-width: 900px) {

  /* Les logos remontent au-dessus de la bande où s'inscrit le nom, sinon
     la légende leur passe dessus. */
  .mur > .tuile--marque img { padding: 16px 16px 66px; object-position: 50% 42%; }

  /* Cadrages propres à certains projets. Le point de recadrage automatique
     convient à la majorité des photographies ; ceux-ci demandaient à être
     réglés un par un, parce que le sujet ou le titre se trouve haut dans
     l'image. */
  .mur [href*="alb"] img,
  .mur [href="anne-laure-bonnassieux/"] img { object-position: 50% 16%; }
  .mur [href*="audreylagoutte"] img         { object-position: 50% 24%; }
  .mur [href*="sophieveneciareyes"] img     { object-position: 50% 40%; }
  .mur [href*="calameo.com/read/004710072db"] img { object-position: 50% 42%; }
  .mur [href="les-belles-journees/"] img    { object-position: 62% 26%; }
  .mur [href="vieilles-charrues/"] img      { object-position: 50% 34%; }
  .mur [href*="youtube.com/watch?v=Y0CJ4"] img { object-position: 50% 46%; }
  .mur [href*="sergebetsenacademy"] img     { object-position: 50% 22%; }
  .mur [href*="youtube.com/watch?v=efI"] img{ object-position: 50% 40%; }
  .mur [href*="shpr.fr"] img                { object-position: 50% 44%; }
  .mur [href*="mabofficiel"] img            { object-position: 50% 22%; }
  .mur [href*="estellevalensuela"] img      { object-position: 50% 18%; }
  .mur [href*="ledriveapart"] img           { object-position: 50% 52%; }
  .mur [href*="Domaine-Delabaude"] img      { object-position: 50% 44%; }
  .mur [href="hilbi/"] img                  { object-position: 50% 38%; }
  .mur [href="leo-ange/"] img               { object-position: 50% 22%; }

  /* Focus projets : même principe, sur des cartes plus grandes. */
  .focus-projet[href="les-belles-journees/"] img { object-position: 58% 30%; }
  .focus-projet[href="vieilles-charrues/"] img   { object-position: 50% 40%; }
  .focus-projet[href="anne-laure-bonnassieux/"] img { object-position: 50% 40%; }
  .focus-projet[href="hilbi/"] img               { object-position: 50% 34%; }
  .focus-projet[href="leo-ange/"] img            { object-position: 50% 20%; }
}

@media (max-width: 900px) {

  /* Menu plein écran : hauteur réelle du navigateur mobile, barres comprises,
     et défilement interne si les quatre entrées ne tiennent pas. */
  .menu {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Toute cible tactile atteint la taille recommandée de quarante-quatre
     pixels, sans que cela se voie dans la composition. */
  .menu a,
  .tri button,
  .pied-colonne a,
  .pied-bas a,
  .lien-texte,
  .entree,
  .liens-404 a { min-height: 44px; }
  .pied-colonne a,
  .pied-bas a,
  .lien-texte,
  .liens-404 a { display: inline-flex; align-items: center; }

  /* Les planches se poussent au doigt : on rend la barre visible et fine,
     pour qu'on sache qu'il y a quelque chose à faire glisser. */
  .hublot {
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 380px) {
  /* Les plus petits écrans : on resserre la gouttière et les titres, sans
     descendre en dessous des tailles lisibles. */
  :root { --gouttiere: 16px; }
  .entete h2,
  .contact-trame h2,
  .sortie h2 { font-size: clamp(30px, 9.4vw, 38px); }
  .regard-titre { font-size: clamp(34px, 10.6vw, 46px); }
  .viseur-logo { width: min(168px, 54vw); }
  .contact-adresse { font-size: 19px; overflow-wrap: anywhere; }
}

@media (max-width: 900px) {

  /* Dernières cibles tactiles sous la taille recommandée : on agrandit la
     zone d'appui par du remplissage, sans toucher à la taille du texte ni à
     la position visuelle de l'élément. */
  .decouvrir,
  .viseur-pied .avis,
  .viseur-pied .entrer,
  .pied-coordonnees .avis {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .decouvrir { margin-bottom: -14px; }
  .viseur-pied .avis,
  .viseur-pied .entrer { margin-block: -12px; }

  .action-rail button { min-height: 48px; padding-top: 14px; }
  .apercu-bouton { min-height: 44px; padding: 12px 14px; }
}