@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --fond: #ffffff;
  --fond-doux: #f4f4f5;
  --encre: #09090b;
  --encre-2: #3f3f46;
  --encre-3: #71717a;
  --trait: #e4e4e7;
  --marge: clamp(16px, 4vw, 56px);
  --rail: clamp(240px, 22vw, 320px);
  --rail-ecart: clamp(32px, 4vw, 64px);
  --rayon: 12px;
  --bord-ecran: rgb(0 0 0 / 0.1);
  --ombre-ecran: 0 8px 30px rgb(0 0 0 / 0.1);
  --ombre-ecran-fort: 0 14px 44px rgb(0 0 0 / 0.16);
  --police: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #09090b;
    --fond-doux: #17171a;
    --encre: #fafafa;
    --encre-2: #d4d4d8;
    --encre-3: #a1a1aa;
    --trait: #27272a;
    --bord-ecran: rgb(255 255 255 / 0.13);
    --ombre-ecran: 0 8px 30px rgb(0 0 0 / 0.6);
    --ombre-ecran-fort: 0 14px 44px rgb(0 0 0 / 0.75);
  }
  :root:not([data-theme="light"]) .theme svg { transform: rotate(180deg); }
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #09090b;
  --fond-doux: #17171a;
  --encre: #fafafa;
  --encre-2: #d4d4d8;
  --encre-3: #a1a1aa;
  --trait: #27272a;
  --bord-ecran: rgb(255 255 255 / 0.13);
  --ombre-ecran: 0 8px 30px rgb(0 0 0 / 0.6);
  --ombre-ecran-fort: 0 14px 44px rgb(0 0 0 / 0.75);
}

:root[data-theme="dark"] .theme svg { transform: rotate(180deg); }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 32px;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

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

.large {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--marge);
}

.aller-au-contenu {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--encre);
  color: var(--fond);
  font-size: 0.9375rem;
  text-decoration: none;
}
.aller-au-contenu:focus { top: 12px; }

/* En-tête */

.tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.tete-nom {
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.tete-liens {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  font-size: 0.9375rem;
}

.tete-liens a {
  color: var(--encre-3);
  text-decoration: none;
  transition: color 0.15s ease;
}

@media (hover: hover) {
  .tete-liens a:hover { color: var(--encre); }
}

@media (max-width: 520px) {
  .tete-liens .tete-secondaire { display: none; }
}

.tete-liens { align-items: center; }

/* Clair ou sombre : une icône discrète, comme les autres liens du menu */
.theme {
  display: none;
  width: 36px;
  height: 36px;
  margin: -8px -9px -8px -6px;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}

.a-js .theme { display: block; }

.theme svg {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .theme:hover { color: var(--encre); }
}

.bascule * { transition: none !important; }
.bascule .theme svg { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important; }

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

/* Au doigt, les petits liens gardent leur place mais offrent une zone plus grande */
@media (pointer: coarse) {
  .tete-nom, .tete-liens a, .pied a, .retour { padding-block: 11px; margin-block: -11px; }
  .lien { padding-block: 9px; margin-block: -9px; }
  .projet-liens { row-gap: 18px; }
  .savoir-preuves { row-gap: 14px; }
}

/* Ouverture */

.ouverture {
  padding-block: clamp(36px, 7vw, 104px) clamp(36px, 5vw, 72px);
}

.ouverture h1 {
  max-width: 14em;
  font-size: clamp(2.5rem, 1.15rem + 5.7vw, 6.25rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
}

.ouverture h1 span { color: var(--encre-3); }

.ouverture-bas {
  display: grid;
  gap: 24px;
  margin-top: clamp(24px, 3.4vw, 48px);
}

.ouverture-bas p {
  max-width: 36em;
  color: var(--encre-2);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: 1.5;
}

.ouverture-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (min-width: 900px) {
  .ouverture-bas {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 48px;
  }
}

/* Boutons et liens */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--encre);
  color: var(--fond);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.bouton.contour {
  border-color: var(--trait);
  background: transparent;
  color: var(--encre);
}

@media (hover: hover) {
  .bouton:hover { opacity: 0.86; }
  .bouton.contour:hover { opacity: 1; background: var(--fond-doux); }
}

.lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--trait);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease;
}

@media (hover: hover) {
  .lien:hover { text-decoration-color: currentColor; }
}

.icone {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Sections */

.section {
  padding-block: clamp(72px, 10vw, 152px) 0;
}

.section > .large > h2,
.section-titre {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
}

/* Projets : le nom et le texte à côté des écrans, rien entre deux projets */

.projets {
  display: grid;
  gap: clamp(72px, 8vw, 128px);
}

.projet {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
}

.projet-texte h3 {
  font-size: clamp(1.875rem, 1.6rem + 1vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.projet-type {
  margin-top: 6px;
  color: var(--encre-3);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.projet-resume {
  margin-top: 14px;
  color: var(--encre-2);
  line-height: 1.5;
}

.projet-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-size: 0.9375rem;
}

@media (min-width: 1000px) {
  .projet {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--rail-ecart);
    align-items: start;
  }
  .projet-texte {
    position: sticky;
    top: 32px;
  }
  .projet-liens {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Écrans : chaque capture est elle-même le lien, ses bords sont la zone cliquable */

.compo {
  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: 100 / var(--hauteur, 58);
  perspective: 2200px;
}

/* La scène elle-même ne reçoit aucun clic : en 3D, son plan passerait devant les écrans posés à la même profondeur */
.compo-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 80%;
  pointer-events: none;
}

.compo-3d .ecran { pointer-events: auto; }

.ecran {
  position: absolute;
  z-index: 1;
  display: block;
  width: var(--l);
  color: inherit;
  text-decoration: none;
  transform-origin: 50% 50%;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.compo .ecran { transform: translateZ(var(--z, 0)); }
.compo .ecran-tel { --z: 2.6cqw; }
.compo .ecran-tel.etroit { --z: 4cqw; }
.compo .st-2 { --z: 5cqw; }

.galerie > figure, .g-tels > figure { perspective: 1800px; }



.ecran-web, .ecran-fenetre, .ecran-video {
  overflow: hidden;
  border-radius: max(8px, calc(var(--l) * 0.012));
  background: #fff;
  box-shadow: 0 0 0 1px var(--bord-ecran), var(--ombre-ecran);
}

.ecran-fenetre, .ecran-video { background: #111113; }

.ecran-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.ecran-barre {
  display: flex;
  align-items: center;
  justify-content: center;
  height: max(18px, calc(var(--l) * 0.032));
  background: #f4f4f5;
  border-bottom: 1px solid #e4e4e7;
}

.ecran-adresse {
  padding-inline: 1.2em;
  border-radius: 99px;
  background: #e4e4e7;
  color: #52525b;
  font-size: max(7.5px, calc(var(--l) * 0.0118));
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.ecran-tel {
  padding: calc(var(--l) * 0.022);
  border-radius: calc(var(--l) * 0.155);
  background: #0a0a0b;
  box-shadow:
    0 0 0 1px var(--bord-ecran),
    0 0 0 1px rgb(255 255 255 / 0.08) inset,
    var(--ombre-ecran);
}

/* L'écran du téléphone : barre d'état, interface, espace du bas, comme sur un vrai mobile (390 x 844) */

.tel-ecran {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--l) * 0.135);
  background: var(--haut);
}

.tel-ecran picture, .tel-ecran img, .tel-ecran video {
  display: block;
  width: 100%;
}

.tel-statut {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--l) * 0.1205);
  padding-inline: calc(var(--l) * 0.078);
  padding-top: calc(var(--l) * 0.012);
  background: var(--haut);
  color: var(--haut-encre);
}

.tel-heure {
  font-size: calc(var(--l) * 0.04);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.tel-ile {
  position: absolute;
  left: 50%;
  top: calc(var(--l) * 0.028);
  width: calc(var(--l) * 0.27);
  height: calc(var(--l) * 0.076);
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}

.tel-reseau { width: calc(var(--l) * 0.165); height: auto; }

.tel-bas {
  position: relative;
  z-index: 1;
  display: block;
  height: calc(var(--l) * 0.0872);
  background: var(--bas);
  color: var(--bas-encre);
}

.tel-bas i {
  position: absolute;
  left: 50%;
  bottom: calc(var(--l) * 0.022);
  width: calc(var(--l) * 0.34);
  height: calc(var(--l) * 0.0125);
  border-radius: 99px;
  background: currentColor;
  transform: translateX(-50%);
}

/* Soulane et sa vidéo occupent tout l'écran, les barres passent par-dessus */

.tel-plein .tel-statut, .tel-plein .tel-bas {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
}

.tel-plein .tel-statut { top: 0; }
.tel-plein .tel-bas { bottom: 0; }

.tel-sans-bas .tel-bas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

.tel-ecran video { aspect-ratio: 390 / 844; object-fit: cover; }

.ecran-web img, .ecran-fenetre img { width: 100%; }

@media (hover: hover) {
  a.ecran { cursor: pointer; }
  .compo:hover :is(.ecran-web, .ecran-fenetre, .ecran-video),
  .galerie figure:hover :is(.ecran-web, .ecran-fenetre) {
    box-shadow: 0 0 0 1px var(--bord-ecran), var(--ombre-ecran-fort);
  }
  .compo:hover .ecran-tel,
  .galerie figure:hover .ecran-tel {
    box-shadow:
      0 0 0 1px var(--bord-ecran),
      0 0 0 1px rgb(255 255 255 / 0.08) inset,
      var(--ombre-ecran-fort);
  }
}

/* Compositions : le grand écran et le téléphone, sans fond autour */

.compo-as2pic { --hauteur: 59; }
.compo-as2pic .ecran-web { --l: 84cqw; left: 0; top: 0; }
.compo-as2pic .ecran-tel { --l: 21cqw; right: 0; top: 12cqw; z-index: 2; }

.compo-soulane { --hauteur: 54; }
.compo-soulane .ecran-video { --l: 84cqw; left: 0; top: 0; }
.compo-soulane .ecran-tel { --l: 21cqw; right: 0; top: 8cqw; z-index: 2; }

.compo-wli-ski { --hauteur: 56; }
.compo-wli-ski .ecran-web { --l: 84cqw; right: 0; top: 0; }
.compo-wli-ski .ecran-tel { --l: 21cqw; left: 0; top: 9cqw; z-index: 2; }

.compo-chalets-hissala { --hauteur: 59; }
.compo-chalets-hissala .ecran-web { --l: 84cqw; left: 0; top: 0; }
.compo-chalets-hissala .ecran-tel { --l: 21cqw; right: 0; top: 12cqw; z-index: 2; }

.compo-hugo-estiot { --hauteur: 59; }
.compo-hugo-estiot .ecran-web { --l: 84cqw; left: 0; top: 0; }
.compo-hugo-estiot .ecran-tel { --l: 21cqw; right: 0; top: 12cqw; z-index: 2; }

.compo-studium { --hauteur: 60; }
.compo-studium .ecran-tel { --l: 26cqw; }
.compo-studium .st-1 { left: 0; top: 5cqw; }
.compo-studium .st-2 { left: 37cqw; top: 0; z-index: 2; }
.compo-studium .st-3 { left: 74cqw; top: 5cqw; }

.compo-chambre-claire { --hauteur: 60; }
.compo-chambre-claire .ecran-fenetre { --l: 76cqw; left: 0; top: 0; }
.compo-chambre-claire .cc-devant { --l: 60cqw; --z: 2.6cqw; left: auto; right: 0; top: 22cqw; z-index: 2; }

.ecran.etroit { display: none; }

@media (max-width: 719.98px) {
  .ecran.pas-etroit { display: none; }
  .ecran.etroit { display: block; }

  .compo-as2pic, .compo-soulane, .compo-wli-ski, .compo-chalets-hissala, .compo-hugo-estiot { --hauteur: 138; }

  .compo-as2pic .ecran-tel,
  .compo-soulane .ecran-tel,
  .compo-wli-ski .ecran-tel,
  .compo-chalets-hissala .ecran-tel,
  .compo-hugo-estiot .ecran-tel { --l: 58cqw; left: auto; right: 0; top: 14cqw; z-index: 1; }

  .compo-as2pic .ecran-tel.etroit,
  .compo-soulane .ecran-tel.etroit,
  .compo-wli-ski .ecran-tel.etroit,
  .compo-chalets-hissala .ecran-tel.etroit,
  .compo-hugo-estiot .ecran-tel.etroit { left: 0; right: auto; top: 0; z-index: 2; }

  .compo-chambre-claire { --hauteur: 62.5; }
  .compo-chambre-claire .cc-devant { --l: 100cqw; right: 0; left: 0; top: 0; }

  .compo-studium { --hauteur: 118; }
  .compo-studium .ecran-tel { --l: 50cqw; }
  .compo-studium .st-1 { left: 0; top: 12cqw; }
  .compo-studium .st-2 { left: 25cqw; top: 0; }
  .compo-studium .st-3 { left: 50cqw; top: 12cqw; }
}

/* Apparitions : doit rester identique à la liste de build.mjs (APPARAIT) */

.js :is(.ouverture h1, .ouverture-bas > *, .projet-texte, .section h2, .savoir, .methode li, .apropos-texte p, .contact h2, .contact-liens, .retour, .fiche-tete > *, .fiche-corps > div, .chiffre, .technique, .suivant):not(.vu) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.js .galerie > figure:not(.vu), .js .g-tels > figure:not(.vu) {
  opacity: 0;
  transform: perspective(1600px) rotateX(7deg) translate3d(0, 26px, 0) scale(0.985);
  transform-origin: 50% 100%;
}

.js .vu {
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}

/* Les captures arrivent en fondu */

.js .ecran img { opacity: 0; transition: opacity 0.6s ease; }
.js .ecran img.charge, .js .ecran img[fetchpriority="high"] { opacity: 1; }
.js .ecran img[fetchpriority="high"] { transition: none; }

.ecran-web { background: #f4f4f5; }

/* Petits gestes */

.icone { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); }

@media (hover: hover) {
  a:hover > .icone-suite { transform: translateX(3px); }
  a:hover > .icone-dehors { transform: translate(2px, -2px); }
}

.bouton { transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.bouton:active { transform: scale(0.97); }

/* Image agrandie */

.zoom {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: clamp(8px, 2vw, 32px);
  border: 0;
  background: rgb(0 0 0 / 0.9);
  cursor: zoom-out;
}
.zoom::backdrop { background: transparent; }
.zoom[open] { display: flex; align-items: center; justify-content: center; }
.zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes zoom-fond { from { background: rgb(0 0 0 / 0); } }
  @keyframes zoom-image { from { opacity: 0; transform: scale(0.96); } }
  .zoom[open] { animation: zoom-fond 0.3s ease; }
  .zoom[open] img { animation: zoom-image 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
}

/* Savoir-faire */

.savoirs { margin-top: clamp(28px, 4vw, 56px); }

.savoir {
  display: grid;
  gap: 4px;
  padding-block: 18px;
  border-top: 1px solid var(--trait);
}

.savoir:last-child { border-bottom: 1px solid var(--trait); }

.savoir h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.savoir p { color: var(--encre-2); font-size: 1rem; line-height: 1.5; }

.savoir-preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-top: 6px;
  font-size: 0.9375rem;
}

@media (min-width: 1000px) {
  .savoir {
    grid-template-columns: var(--rail) minmax(0, 1fr) minmax(0, 15em);
    gap: var(--rail-ecart);
    padding-block: 20px;
    align-items: baseline;
  }
  .savoir-preuves {
    justify-content: flex-end;
    margin-top: 0;
  }
}

/* Méthode */

.methode {
  display: grid;
  gap: 28px;
  margin-top: clamp(28px, 4vw, 56px);
  counter-reset: etape;
}

.methode li { counter-increment: etape; }

.methode li::before {
  content: counter(etape);
  display: block;
  margin-bottom: 10px;
  color: var(--encre-3);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.methode h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.methode p { margin-top: 8px; color: var(--encre-2); }

@media (min-width: 900px) {
  .methode { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* À propos */

.apropos {
  display: grid;
  gap: 24px;
}

.apropos-texte {
  display: grid;
  gap: 16px;
  max-width: 40em;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: 1.5;
  color: var(--encre-2);
}

@media (min-width: 1000px) {
  .apropos { grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--rail-ecart); }
}

/* Contact */

.contact {
  margin-top: clamp(72px, 10vw, 152px);
  padding-block: clamp(56px, 8vw, 112px);
  border-top: 1px solid var(--trait);
}

.contact h2 {
  font-size: clamp(2.5rem, 1.15rem + 5.7vw, 6.25rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
}

.contact-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 40px);
}

/* Pied de page */

.pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 24px;
  border-top: 1px solid var(--trait);
  color: var(--encre-3);
  font-size: 0.875rem;
}

.pied a { text-underline-offset: 3px; }

/* Page d'un projet */

.retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: clamp(16px, 2vw, 32px);
  color: var(--encre-3);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

@media (hover: hover) {
  .retour:hover { color: var(--encre); }
}

.fiche-tete {
  display: grid;
  gap: 16px;
  padding-block: clamp(24px, 3.5vw, 56px) clamp(28px, 3.5vw, 48px);
}

.fiche-tete h1 {
  font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
}

.fiche-intro {
  max-width: 40em;
  color: var(--encre-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.45;
}

.fiche-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.fiche-corps {
  display: grid;
  gap: 40px;
  padding-block: clamp(40px, 6vw, 88px);
}

.fiche-corps h2 {
  margin-bottom: 12px;
  color: var(--encre-3);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}

.fiche-besoin {
  max-width: 30em;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.fiche-liste li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--trait);
  color: var(--encre-2);
  line-height: 1.45;
}

.fiche-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.15em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--encre-3);
}

.fiche-liste li:last-child { border-bottom: 1px solid var(--trait); }

.fiche-meta { display: grid; gap: 14px; margin-top: 28px; font-size: 0.9375rem; }
.fiche-meta dt { color: var(--encre-3); }

@media (min-width: 900px) {
  .fiche-corps { grid-template-columns: 5fr 7fr; gap: 32px; }
}

.chiffres {
  display: grid;
  gap: 20px;
  padding-block: 28px;
  border-block: 1px solid var(--trait);
}

.chiffre b {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.chiffre span {
  display: block;
  max-width: 18em;
  margin-top: 8px;
  color: var(--encre-3);
  font-size: 0.9375rem;
  line-height: 1.4;
}

@media (min-width: 720px) {
  .chiffres { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.galerie {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  padding-block: clamp(40px, 6vw, 88px) 0;
}

.g-case { grid-column: span 12; }
.g-moitie { grid-column: span 12; }

@media (min-width: 720px) {
  .g-moitie { grid-column: span 6; }
}

.galerie .ecran {
  position: relative;
  --l: 100cqw;
  width: 100%;
}

.g-web, .g-tel { container-type: inline-size; }

.g-tels {
  grid-column: span 12;
  display: flex;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  margin-block: clamp(8px, 1.5vw, 24px);
}

.g-tel { flex: 0 1 340px; }

@media (max-width: 719.98px) {
  .g-tels {
    gap: 16px;
    margin-inline: calc(var(--marge) * -1);
    padding: 8px var(--marge) 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .g-tels::-webkit-scrollbar { display: none; }
  .g-tel { flex: 0 0 62vw; scroll-snap-align: center; }
}

.g-legende {
  margin-top: 10px;
  color: var(--encre-3);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.technique {
  margin-top: clamp(40px, 5vw, 72px);
  color: var(--encre-3);
  font-size: 0.9375rem;
}

.technique b { color: var(--encre); font-weight: 500; }

.suivant {
  display: block;
  margin-top: clamp(40px, 5vw, 72px);
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--trait);
  text-decoration: none;
}

.suivant span { display: block; color: var(--encre-3); font-size: 0.9375rem; }

.suivant b {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  margin-top: 4px;
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.032em;
}

.suivant .icone { transition: transform 0.25s ease; }

@media (hover: hover) {
  .suivant:hover .icone { transform: translateX(0.12em); }
}

/* Page de texte */

.texte {
  max-width: 44em;
  padding-block: clamp(24px, 4vw, 56px) clamp(56px, 8vw, 96px);
  color: var(--encre-2);
}

.texte h1 {
  color: var(--encre);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.texte h2 {
  margin-top: 36px;
  color: var(--encre);
  font-size: 1.25rem;
  letter-spacing: -0.018em;
}

.texte p { margin-top: 10px; }

/* Passage d'une page à l'autre */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) {
    transform-origin: 0 0;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.33, 0, 0.15, 1);
  }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 0.45s;
    animation-timing-function: ease;
  }
  /* Le passage de clair à sombre prend son temps */
  .fondu-theme::view-transition-group(root),
  .fondu-theme::view-transition-old(root),
  .fondu-theme::view-transition-new(root) {
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecran, .bouton, .lien { transition: none; }
}