/* scan2map 2026 — Lumière rasante */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --fond: #141210;
  --fond-2: #1c1a17;
  --fond-3: #25221e;
  --filet: #3a3631;
  --pierre: #e6e1d8;
  --pierre-2: #a9a298;
  --mesure: #f28a2e;
  --mesure-fonce: #b85f14;
  --marge: clamp(1rem, 4vw, 3.5rem);
  --large: 78rem;
  --barre-h: 3.5rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--filet) var(--fond); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fond);
  color: var(--pierre);
  font: 400 1.0625rem/1.55 "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  font-variant-numeric: lining-nums;
  caret-color: var(--mesure);
  accent-color: var(--mesure);
}
::selection { background: var(--mesure); color: var(--fond); }
:focus-visible { outline: 2px solid var(--mesure); outline-offset: 3px; border-radius: 1px; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--mesure); }
h1, h2, h3 { margin: 0; font-weight: 650; text-wrap: balance; }
p { margin: 0; }
dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.fleche { width: 1em; height: 0.625em; flex: none; transition: transform 0.4s var(--ease); }
a:hover .fleche { transform: translateX(0.25em); }

/* ---------------------------------------------------------------- barre */
.barre {
  position: fixed; inset: 0 0 auto; z-index: 10;
  height: var(--barre-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--marge);
  border-bottom: 1px solid color-mix(in srgb, var(--filet) 70%, transparent);
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(10px);
}
.marque {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 760; font-stretch: 125%; font-size: 1.15rem; letter-spacing: -0.01em;
  text-decoration: none; margin-right: auto;
}
/* logo officiel (cartouche, texte, bande jaune) : 1900 × 626 */
.marque img { height: 2.7rem; width: auto; aspect-ratio: 1900 / 626; flex: none; }
.page main .marque img { height: 5.4rem; }
.nav, .langues { display: flex; gap: 1.5rem; }
.nav a, .langues a {
  font-size: 0.75rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--pierre-2); padding-block: 0.5rem;
}
.nav a:hover, .langues a:hover { color: var(--pierre); }
.langues { gap: 0.9rem; padding-left: 1.5rem; border-left: 1px solid var(--filet); }
.langues a[aria-current] { color: var(--mesure); }

/* menu des domaines : à droite, sous la barre des langues */
.menu { position: absolute; top: calc(100% + 0.4rem); right: calc(var(--marge) - 0.6rem); }
.menu summary {
  list-style: none; cursor: pointer; display: grid; align-content: center; gap: 4px;
  width: 2.5rem; height: 2.5rem; padding: 0 0.6rem;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; height: 1.5px; background: var(--pierre-2); transition: transform 0.35s var(--ease), opacity 0.2s, background 0.3s; }
.menu summary:hover span, .menu[open] summary span { background: var(--pierre); }
.menu[open] summary span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu[open] summary span:nth-child(2) { opacity: 0; }
.menu[open] summary span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-panneau {
  position: absolute; top: calc(100% + 0.2rem); right: 0.6rem;
  width: min(21rem, calc(100vw - 2 * var(--marge))); max-height: calc(100svh - var(--barre-h) - 1rem); overflow-y: auto;
  padding: 1.1rem 1.4rem 1.3rem; background: var(--fond-2); border: 1px solid var(--filet);
}
.menu-titre { font-size: 0.68rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pierre-2); margin-bottom: 0.4rem; }
.menu-panneau li a { display: block; padding: 0.45rem 0; text-decoration: none; font-weight: 580; font-stretch: 106%; border-bottom: 1px solid var(--filet); }
.menu-panneau li:last-child a { border-bottom: 0; }
.menu-panneau a[aria-current] { color: var(--mesure); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-panneau { animation: deroule 0.35s var(--ease); }
  @keyframes deroule { from { opacity: 0; transform: translateY(-0.4rem); } }
}
#contact { scroll-margin-top: var(--barre-h); }

/* ---------------------------------------------------------------- voyage d'échelle */
.voyage { position: relative; }
.toile {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden;
}
.etape-hero { margin-top: -100svh; min-height: 100svh; }
.toile canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.toile .instruments { transition: opacity 0.6s var(--ease); }
.toile.ferme .instruments { opacity: 0; }
.sans-3d { display: none; }
.voyage.sans-3d-actif canvas, .voyage.sans-3d-actif .instruments { display: none; }
.voyage.sans-3d-actif .sans-3d {
  display: block; position: absolute; top: calc(var(--barre-h) + 2rem); left: var(--marge); right: var(--marge);
  color: var(--pierre-2); font-size: 0.9rem; max-width: 40ch;
}

.etape {
  position: relative; z-index: 1;
  min-height: 62svh;                     /* défilement court d'une étape à l'autre (corrections-12) */
  display: grid; align-content: end;
  padding: calc(var(--barre-h) + 2rem) var(--marge) clamp(5rem, 14svh, 9rem);
  pointer-events: none;
}
.etape-texte { max-width: 33rem; pointer-events: auto; }
.etape h2 {
  font-size: clamp(1.75rem, 3.3vw, 2.85rem); line-height: 1.04; font-stretch: 108%; letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.etape-texte > p { color: var(--pierre); max-width: 46ch; }
/* accueil : ouverture centrée, sans modèle ; l'échelle couverte en grand, la devise, les métiers */
.etape-hero { align-content: center; justify-items: center; text-align: center; padding-bottom: calc(var(--barre-h) + 2rem); }
.etape-hero .etape-texte { max-width: 60rem; display: grid; justify-items: center; }
.titre-hero {
  font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 0.95; font-weight: 800; font-stretch: 122%;
  letter-spacing: -0.03em; margin-bottom: 0.9rem;
}
/* à plat au repos ; l'entrée (plus bas) le fait venir du point de fuite, incliné, puis le redresse (corrections-16) */
.titre-hero-mots { display: inline-block; transform-style: preserve-3d; transform-origin: 50% 100%; }
.titre-hero .mot { display: inline-block; transform-origin: 0% 50%; }
.etape-hero .devise { margin-bottom: 2rem; }
.metiers { color: var(--pierre); font-size: clamp(0.95rem, 1.3vw, 1.12rem); font-stretch: 106%; max-width: 52rem; margin-bottom: 1.4rem; }
.metiers span { white-space: nowrap; }
.metiers .sep { white-space: normal; }
/* tiret qui tomberait en bout de ligne : remplacé par un retour à la ligne (site.js) */
.metiers .sep[hidden] { display: block; height: 0; overflow: hidden; }
.etape-hero .chaine { justify-content: center; max-width: none; }
/* incitation au défilement : un filet qui descend */
.incitation {
  position: absolute; left: 50%; bottom: clamp(1.5rem, 5svh, 3rem); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.7rem; pointer-events: auto; text-decoration: none;
  font-size: 0.68rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pierre-2);
}
.incitation i { position: relative; display: block; width: 1px; height: 3.2rem; background: var(--filet); overflow: hidden; }
.incitation i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--mesure); }
.incitation:hover { color: var(--pierre); }
.incitation { transition: opacity 0.4s var(--ease), visibility 0s; }
.incitation.partie { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s var(--ease), visibility 0s 0.4s; }
@media (prefers-reduced-motion: no-preference) {
  .incitation i::after { animation: descend 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  @keyframes descend { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
}
.sous-titre { font-size: clamp(1.25rem, 2.2vw, 1.8rem); font-weight: 620; font-stretch: 112%; line-height: 1.15; }
.devise {
  font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.15; font-weight: 760; font-stretch: 118%;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--mesure);
  margin: 0.2rem 0 1.6rem;
}
.chapeau { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.bouton {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.25rem 0.8rem;
  background: var(--mesure); color: var(--fond);
  font-weight: 640; font-stretch: 112%; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border-radius: 1px;
  transition: background-color 0.3s var(--ease);
}
.bouton:hover { background: var(--pierre); color: var(--fond); }
.tel { font-variant-numeric: tabular-nums; font-stretch: 108%; font-weight: 520; text-decoration: none; }
.aide { margin-top: 2.25rem; font-size: 0.8rem; color: var(--pierre-2); }

.fiche { display: grid; gap: 0.15rem; margin-top: 1.75rem; border-top: 1px solid var(--filet); padding-top: 1rem; }
.fiche div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.fiche dt, .liste-livrables dt + dd::before {
  font-size: 0.72rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pierre-2); padding-top: 0.2em;
}
.fiche dd { font-size: 0.95rem; }
.lien-mesure {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem;
  color: var(--mesure); font-weight: 600; font-stretch: 112%; font-size: 0.85rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 0.3rem;
}
.lien-mesure:hover { color: var(--pierre); }

/* instruments : échelle et légende */
.instruments {
  position: absolute; right: var(--marge); bottom: clamp(1.5rem, 5svh, 3rem);
  display: grid; justify-items: end; gap: 1.1rem; text-align: right;
  padding: 0.9rem 1rem 1rem; margin: -0.9rem -1rem -1rem;
  background: color-mix(in srgb, var(--fond) 72%, transparent);
  pointer-events: none;
}
/* vue fixe : sans WebGL ou sans JavaScript, chaque étape montre une image du nuage */
.vue-fixe { display: none; width: 100%; max-width: 40rem; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 1.75rem; background: var(--fond-2); }
html:not(.js) .vue-fixe, .sans-3d-actif .vue-fixe, .en-charge .vue-fixe { display: block; }
html:not(.js) .toile { display: none; }
html:not(.js) .etape-hero { margin-top: 0; }
.legende { display: grid; gap: 0.15rem; font-size: 0.8rem; color: var(--pierre-2); }
.legende [data-legende-titre] { color: var(--pierre); font-size: 0.95rem; font-weight: 600; font-stretch: 108%; }
.legende-note { font-variant-numeric: tabular-nums; }
.echelle { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: end; gap: 0.35rem 1rem; }
.echelle-libelle { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pierre-2); font-stretch: 112%; }
.echelle-valeur {
  color: var(--mesure); font-weight: 640; font-stretch: 112%; font-size: 1rem; font-variant-numeric: tabular-nums;
  min-width: 5ch; text-align: right;
}
.echelle-barre {
  grid-column: 1 / -1; justify-self: end;
  display: flex; height: 7px; width: 140px;
  border: 1px solid var(--mesure);
}
.echelle-barre i { flex: 1; }
.echelle-barre i:nth-child(odd) { background: var(--mesure); }

/* chaîne d'étapes : du relevé au livrable, reliées par des flèches fines */
.chaine { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 0.3rem; max-width: 36rem; color: var(--pierre); }
.chaine li { display: inline-flex; align-items: center; }
.chaine li:not(:last-child)::after {
  content: ""; flex: none; width: 0.95em; height: 0.6em; margin: 0 0.55em;
  background: var(--pierre-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.etape .chaine { font-size: 1.02rem; }
.chaine.chapeau { max-width: 30rem; }

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

/* ---------------------------------------------------------------- blocs */
.bloc { padding: clamp(5rem, 12vw, 9rem) var(--marge); max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; }
.bloc-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.bloc-tete h2, .mire h2, .contact h2 {
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1; font-stretch: 118%; font-weight: 720; letter-spacing: -0.02em;
}
.bloc-tete p { color: var(--pierre-2); max-width: 44ch; }

.liste-domaines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; border-top: 1px solid var(--filet); }
.domaine {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.35rem 1.5rem;
  padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--filet);
  position: relative;
}
.domaine::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--mesure);
  transition: width 0.7s var(--ease);
}
.domaine:hover::before { width: 100%; }
.domaine h3 { font-size: 1.35rem; font-stretch: 112%; font-weight: 640; line-height: 1.15; grid-row: span 2; }
.domaine-court { color: var(--pierre-2); font-size: 0.74rem; font-weight: 600; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.35rem; }
.domaine p:last-child { color: var(--pierre-2); font-size: 0.95rem; }

/* mire de gris : capteurs par échelle */
.mire { padding: clamp(5rem, 10vw, 8rem) 0 0; }
.mire h2 { padding: 0 var(--marge); max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.mire-plages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mire-plages li {
  background: hsl(36 5% var(--l, 16%));
  min-height: clamp(12rem, 24vw, 19rem);
  padding: 1.5rem clamp(1rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem;
  color: var(--pierre);
}
.mire-plages li:nth-child(2) { --l: 27%; }
.mire-plages li:nth-child(3) { --l: 57%; }
.mire-plages li:nth-child(4) { --l: 71%; }
.mire-plages li:nth-child(5) { --l: 85%; }
.mire-plages li:nth-child(n+3) { color: #151311; }
.mire-plages h3 { font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-stretch: 115%; font-weight: 680; }
.mire-plages p { font-size: 0.9rem; }

.liste-livrables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4rem; }
.liste-livrables > div { border-top: 1px solid var(--filet); padding: 1.4rem 0 2.25rem; }
.liste-livrables dt { font-size: 1.15rem; font-weight: 620; font-stretch: 110%; margin-bottom: 0.5rem; }
.liste-livrables dd { color: var(--pierre-2); max-width: 34ch; }

/* coordonnées : petit cartouche rectangulaire, centré */
.contact { border-top: 1px solid var(--filet); display: grid; justify-items: center; padding-block: clamp(3rem, 7vw, 5rem); }
.coordonnees {
  display: grid; gap: 0.3rem; min-width: min(22rem, 100%); text-align: center;
  border: 1px solid var(--filet); padding: 1.1rem 1.4rem 1.2rem;
  font-size: 0.88rem; font-variant-numeric: tabular-nums; color: var(--pierre-2);
}
.coordonnees h2 {
  font-size: 0.7rem; font-weight: 600; font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pierre-2); border-bottom: 1px solid var(--filet); padding-bottom: 0.55rem; margin-bottom: 0.4rem;
}
.coordonnees a { color: var(--pierre); text-decoration: none; }
.coordonnees a:hover { color: var(--mesure); }
/* spécialisations et extensions : une section à part, en grand */
.specialites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; padding-top: 0; }
.specialite h2 {
  font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; font-stretch: 118%; font-weight: 720; letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.specialite li {
  border-top: 1px solid var(--filet); padding: 0.75rem 0 0.8rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-stretch: 108%; font-weight: 560;
}
.domaines .bloc-tete { grid-template-columns: minmax(0, 1fr); }
#titre-domaines span { display: block; white-space: nowrap; }
#titre-domaines span + span { color: var(--pierre-2); }
.pied {
  display: grid; justify-items: center; gap: 0.75rem; text-align: center;
  padding: 2.25rem var(--marge) 2.75rem; border-top: 1px solid var(--filet);
  font-size: 0.82rem; color: var(--pierre-2);
}
.pied-droits { font-size: 0.95rem; font-weight: 560; font-stretch: 108%; color: var(--pierre); }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }

.page-texte { padding-top: calc(var(--barre-h) + clamp(4rem, 10vw, 7rem)); }
.page-texte h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-stretch: 120%; font-weight: 740; margin-bottom: 3rem; }
.page main .marque { font-size: 2.5rem; display: block; margin-bottom: 1rem; }

.nav a[aria-current="page"] { color: var(--pierre); }
.domaine h3 a { text-decoration: none; }
.domaine h3 a::after { content: ""; position: absolute; inset: 0; }
.domaine:hover h3 a { color: var(--mesure); }

/* ---------------------------------------------------------------- galerie : bibliothèques par domaine */
.page-galerie { padding-top: calc(var(--barre-h) + clamp(3.5rem, 8vw, 6rem)); }
.page-galerie h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; font-stretch: 120%; font-weight: 740; letter-spacing: -0.02em; }
.compte { display: block; margin-top: 0.75rem; color: var(--pierre); font-variant-numeric: tabular-nums; font-stretch: 108%; }

/* la règle suit le défilement : elle reste lisible au-dessus des petits modèles comme des grands */
.galerie-outils { position: sticky; top: var(--barre-h); z-index: 5; background: var(--fond); }
.regle { margin: 0; padding: 0.9rem 0 0.6rem; }
.regle-axe { position: relative; height: 2.2rem; border-bottom: 1px solid var(--pierre-2); }
/* un repère orange par modèle mesuré : c'est une mesure, il a droit à l'orange */
.regle-axe i {
  position: absolute; left: var(--x); bottom: 0; width: 2px; margin-left: -1px; height: 1.1rem; background: var(--mesure);
  opacity: 0.75; transition: height 0.4s var(--ease), opacity 0.3s;
}
.regle-axe i.allume { height: 2.2rem; opacity: 1; }
.regle-graduations { position: relative; height: 1.6rem; font-size: 0.7rem; font-stretch: 108%; color: var(--pierre-2); font-variant-numeric: tabular-nums; }
.regle-graduations li { position: absolute; left: var(--x); top: 0; padding-top: 0.45rem; transform: translateX(-50%); white-space: nowrap; }
.regle-graduations li::before { content: ""; position: absolute; left: 50%; top: -1px; width: 1px; height: 0.35rem; background: var(--pierre-2); }
.regle-graduations li:first-child { transform: none; }
.regle-graduations li:first-child::before { left: 0; }
.regle-graduations li:last-child { transform: translateX(-100%); }
.regle-graduations li:last-child::before { left: auto; right: 0; }
/* sommaire des bibliothèques */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; padding: 0.8rem 0; border-block: 1px solid var(--filet); }
.filtres-libelle {
  margin-right: 0.5rem; font-size: 0.7rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre-2);
}
.filtres a {
  font-size: 0.78rem; font-weight: 560; font-stretch: 110%; letter-spacing: 0.04em; text-decoration: none;
  color: var(--pierre-2); padding: 0.35rem 0;
}
.filtres a:hover { color: var(--pierre); }
.bibliotheque { padding-top: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: calc(var(--barre-h) + 8rem); }
.bibliotheque-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.bibliotheque-tete h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-stretch: 114%; font-weight: 700; line-height: 1.05; }
.bibliotheque-tete p { font-size: 0.72rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre-2); }
.vignette, .couple { scroll-margin-top: calc(var(--barre-h) + 9rem); }

.planche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.25rem); }
.vignette { position: relative; display: grid; align-content: start; gap: 0.3rem; }
.vignette[hidden] { display: none; }
.vignette a { display: grid; gap: 0.9rem; text-decoration: none; }
.vignette a::after { content: ""; position: absolute; inset: 0; }
/* la vue fixe a le même fond que la page : « lighten » fond les deux, l'objet repose sur la planche sans cadre */
.vignette img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--fond); mix-blend-mode: lighten; transition: filter 0.6s var(--ease); }
.vignette:hover img { filter: brightness(1.12); }
.vignette h2, .vignette h3 { font-size: 1.05rem; font-weight: 620; font-stretch: 106%; line-height: 1.25; }
.vignette:hover h2, .vignette:hover h3 { color: var(--mesure); }
.vignette-lieu { font-size: 0.85rem; color: var(--pierre-2); }
.vignette-mesure { font-size: 0.85rem; font-weight: 620; font-stretch: 112%; color: var(--mesure); font-variant-numeric: tabular-nums; }
.non-verifiee { color: var(--pierre-2) !important; font-weight: 450 !important; font-style: italic; }

/* ---------------------------------------------------------------- scène : fiche modèle et tête de domaine */
.scene { position: relative; height: 100svh; min-height: 32rem; overflow: hidden; }
.scene canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* fiche : cadre 3D réduit (corrections-10) ; la page et ses légendes restent en vue, et les bandes de part et d'autre
   du cadre font défiler la page à la molette ou au doigt */
.scene-modele { height: 78svh; min-height: 30rem; margin-inline: clamp(1.25rem, 4vw, 3.5rem); }
.scene-modele canvas { cursor: grab; touch-action: none; }
.scene-modele canvas.saisi { cursor: grabbing; }
.scene-modele canvas:focus-visible { outline-offset: -6px; }
.scene .vue-fixe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; aspect-ratio: auto; }
html:not(.js) .scene canvas, .scene.sans-3d-actif canvas, html:not(.js) .scene .commandes, .scene.sans-3d-actif .commandes,
html:not(.js) .scene .aide, .scene.sans-3d-actif .aide, html:not(.js) .scene .cote, html:not(.js) .scene .cote-texte,
.scene.sans-3d-actif .cote, .scene.sans-3d-actif .cote-texte, html:not(.js) .scene .echelle, .scene.sans-3d-actif .echelle { display: none; }
.scene.sans-3d-actif .sans-3d { display: block; margin-top: 1rem; color: var(--pierre-2); font-size: 0.85rem; }
.scene-texte {
  position: absolute; left: var(--marge); bottom: clamp(1.5rem, 6svh, 3.5rem); max-width: 34rem;
  padding: 1rem 1.25rem 1rem 0; pointer-events: none;
}
.scene-texte a, .scene-texte .bouton { pointer-events: auto; }
.scene-modele h1 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.04; font-stretch: 110%; font-weight: 680; letter-spacing: -0.015em; }
.scene-lieu { margin-top: 0.6rem; color: var(--pierre-2); font-variant-numeric: tabular-nums; }
.scene-modele .aide { margin-top: 1.25rem; }
.scene .instruments { bottom: clamp(1.5rem, 6svh, 3.5rem); }
.instruments-note { position: absolute; right: var(--marge); bottom: clamp(1.5rem, 6svh, 3.5rem); max-width: 26ch; font-size: 0.85rem; text-align: right; }

.retour {
  position: absolute; top: calc(var(--barre-h) + 1.25rem); left: var(--marge);
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pierre-2); text-decoration: none;
}
.retour .fleche { transform: scaleX(-1); }
.retour:hover .fleche { transform: scaleX(-1) translateX(0.25em); }
.commandes {
  position: absolute; top: calc(var(--barre-h) + 3.6rem); right: var(--marge);
  display: flex; align-items: center; gap: 1.5rem;
}
.lumiere { display: flex; align-items: center; gap: 0.75rem; }
.lumiere span, .bouton-filet {
  font-size: 0.72rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre-2);
}
.lumiere input { width: 8.5rem; appearance: none; background: none; height: 1.5rem; margin: 0; cursor: pointer; }
.lumiere input::-webkit-slider-runnable-track { height: 1px; background: var(--pierre-2); }
.lumiere input::-moz-range-track { height: 1px; background: var(--pierre-2); }
.lumiere input::-webkit-slider-thumb { appearance: none; width: 0.75rem; height: 0.75rem; margin-top: -0.35rem; border-radius: 50%; background: var(--pierre); }
.lumiere input::-moz-range-thumb { width: 0.75rem; height: 0.75rem; border: 0; border-radius: 50%; background: var(--pierre); }
.bouton-filet { font-family: inherit; background: none; border: 1px solid var(--filet); border-radius: 1px; padding: 0.55rem 0.8rem 0.5rem; cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.bouton-filet:hover { color: var(--pierre); border-color: var(--pierre-2); }
.bouton-filet[aria-pressed="true"], .bouton-filet[aria-expanded="true"] { color: var(--pierre); border-color: var(--pierre); }

/* réglages de l'affichage : panneau sous les commandes */
.reglages {
  position: absolute; top: calc(var(--barre-h) + 6.8rem); right: var(--marge); width: 17.5rem; z-index: 2;
  display: grid; gap: 0.55rem; padding: 0.9rem 1rem 1rem; background: rgb(20 18 16 / 0.86); border: 1px solid var(--filet);
}
.scene:has(.vues) .reglages { top: calc(var(--barre-h) + 10rem); }
.reglages[hidden], .reglages [hidden] { display: none; }
.reglage { display: grid; gap: 0.15rem; }
.reglage span { font-size: 0.68rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre-2); }
.reglage input[type="range"] { width: 100%; appearance: none; background: none; height: 1.4rem; margin: 0; cursor: pointer; }
.reglage input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--pierre-2); }
.reglage input[type="range"]::-moz-range-track { height: 1px; background: var(--pierre-2); }
.reglage input[type="range"]::-webkit-slider-thumb { appearance: none; width: 0.75rem; height: 0.75rem; margin-top: -0.35rem; border-radius: 50%; background: var(--pierre); }
.reglage input[type="range"]::-moz-range-thumb { width: 0.75rem; height: 0.75rem; border: 0; border-radius: 50%; background: var(--pierre); }
.reglage-case { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.2rem 0; }
.reglage-case input { accent-color: var(--mesure); width: 0.95rem; height: 0.95rem; margin: 0; }
.reglages .bouton-filet { justify-self: start; margin-top: 0.3rem; }
html:not(.js) .reglages, .scene.sans-3d-actif .reglages { display: none; }
.toile canvas.lien, .scene-domaine canvas.lien { cursor: pointer; }

/* mesures : traits orange posés sur le modèle, longueur au milieu */
.scene-modele canvas.mesure { cursor: crosshair; }
.mesures { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mesures line { stroke: var(--mesure); stroke-width: 1.5; }
.mesures circle { fill: var(--mesure); stroke: var(--fond); stroke-width: 1; }
.mesures-textes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mesure-texte {
  position: absolute; transform: translate(-50%, -140%); white-space: nowrap;
  color: var(--mesure); font-size: 0.85rem; font-weight: 640; font-stretch: 112%; font-variant-numeric: tabular-nums;
  padding: 0.15rem 0.5rem; background: var(--fond); border: 1px solid var(--mesure);
}
.mesure-aide {
  position: absolute; top: calc(var(--barre-h) + 6.8rem); left: var(--marge); max-width: 19rem; z-index: 2;
  display: grid; gap: 0.5rem; padding: 0.8rem 1rem 0.9rem; background: rgb(20 18 16 / 0.86); border: 1px solid var(--filet);
  font-size: 0.85rem;
}
.mesure-aide[hidden] { display: none; }
.mesure-note { color: var(--pierre-2); font-size: 0.78rem; }
.mesure-aide .bouton-filet { justify-self: start; }
html:not(.js) .mesure-aide, .scene.sans-3d-actif .mesure-aide, .scene.sans-3d-actif .mesures { display: none; }

/* rétro-ingénierie : scan, CAO nominale, écarts ; légende des couleurs comme sur les rapports de contrôle */
.vues { position: absolute; top: calc(var(--barre-h) + 7rem); right: var(--marge); display: flex; gap: 0.5rem; }
.legende-ecarts {
  position: absolute; top: calc(var(--barre-h) + 7.6rem); right: var(--marge); width: 15rem;
  padding: 0.6rem 0.7rem; background: rgb(20 18 16 / 0.72);
  display: grid; gap: 0.4rem; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--pierre-2);
}
.legende-ecarts[hidden] { display: none; }
.legende-ecarts-titre { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 560; font-stretch: 112%; }
.legende-ecarts-rampe { height: 0.5rem; background: linear-gradient(90deg, #1b2cf2, #1ee3e8, #1fe41f, #e8e81e, #f2241b); }
.legende-ecarts-valeurs { display: flex; justify-content: space-between; }
html:not(.js) .vues, .scene.sans-3d-actif .vues { display: none; }

/* cote : trait orange qui suit la plus grande dimension horizontale de l'objet */
.cote { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 0.3s; }
.cote line, .cote path { stroke: var(--mesure); stroke-width: 1; fill: none; }
.cote-texte {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.3s;
  color: var(--mesure); font-size: 0.85rem; font-weight: 640; font-stretch: 112%; font-variant-numeric: tabular-nums;
  padding: 0.15rem 0.5rem; background: var(--fond); border: 1px solid var(--mesure);
}
html:not(.js) .cote-texte { display: none; }

.fiche-modele { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; padding-top: clamp(3rem, 7vw, 5rem); }
.fiche-modele .fiche { margin-top: 0; gap: 0.4rem; }
.fiche-modele .fiche div { grid-template-columns: 13rem 1fr; }
.fiche .mesure { color: var(--mesure); font-weight: 600; font-stretch: 108%; font-variant-numeric: tabular-nums; }
.fiche dd a { text-decoration-color: var(--filet); }
.voisins { display: grid; gap: 0; border-top: 1px solid var(--filet); }
.voisin { display: grid; gap: 0.25rem; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--filet); text-decoration: none; font-weight: 560; font-stretch: 106%; }
.voisin span { font-size: 0.7rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre-2); }
.suivant { text-align: right; }

/* ---------------------------------------------------------------- page de domaine */
.scene-domaine .scene-texte { max-width: 40rem; }
.titre-domaine {
  font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 0.92; font-weight: 800; font-stretch: 118%;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.sous-titre { margin-top: 0.75rem; color: var(--pierre-2); font-size: 0.78rem; font-weight: 600; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; }
.scene-domaine .chapeau { margin-top: 1.5rem; }
.scene-domaine .actions { margin-top: 1.75rem; }
.scene-domaine .lien-mesure { margin-top: 0; }
.bloc-tete .lien-mesure { margin-top: 0; }
.autres-domaines { padding-top: 0; }
.autres-domaines h2 { font-size: 0.75rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre-2); margin-bottom: 1rem; }
.autres-domaines ul { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; border-top: 1px solid var(--filet); padding-top: 1.25rem; }
.autres-domaines a { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 640; font-stretch: 114%; text-decoration: none; }

/* entrée du héros : visible par défaut, glissement doux si le mouvement est permis */
@media (prefers-reduced-motion: no-preference) {
  .js .etape-hero .etape-texte > :not(.titre-hero) { animation: monte 1.1s var(--ease) both; }
  .js .etape-hero .devise { animation-delay: 0.55s; }
  .js .etape-hero .metiers { animation-delay: 0.7s; }
  .js .etape-hero .chaine { animation-delay: 0.85s; }
  /* « Du micromètre au kilomètre » : générique de film de science-fiction à l'envers, le titre part du point de fuite,
     glisse sur le plan incliné jusqu'à sa place (sans mouvement latéral), puis se redresse ; plus rien ne bouge ensuite */
  .js .titre-hero-mots { animation: fond 3.6s both; }
  @keyframes fond {
    from { opacity: 0; transform: perspective(3.2em) rotateX(40deg) translateY(-40em); animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); }
    12% { opacity: 1; }
    72% { transform: perspective(3.2em) rotateX(40deg) translateY(0); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
    to { transform: perspective(3.2em) rotateX(0deg) translateY(0); }
  }
  .js .etape-hero .chapeau { animation-delay: 0.12s; }
  .js .etape-hero .actions { animation-delay: 0.22s; }
  @keyframes monte { from { opacity: 0; transform: translateY(0.75rem); filter: blur(6px); } }
}

/* ---------------------------------------------------------------- adaptations */
@media (max-width: 1100px) {
  .nav { display: none; }
  .langues { border-left: 0; padding-left: 0; }
  .liste-livrables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liste-domaines, .specialites, .couple { grid-template-columns: minmax(0, 1fr); }
  .planche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-modele { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .etape { padding-bottom: 5.5rem; }
  .titre-hero { font-size: 2.5rem; }
  .etape-hero .etape-texte { background: none; }
  .devise { margin-bottom: 1.25rem; }
  .actions { margin-top: 1.5rem; }
  .aide { margin-top: 1.25rem; }
  .etape-texte {
    padding: 1.25rem 0 0;
    background: linear-gradient(to bottom, transparent, var(--fond) 2.5rem);
    margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge);
  }
  .instruments { left: var(--marge); right: var(--marge); bottom: 1rem; grid-template-columns: 1fr auto; align-items: end; justify-items: stretch; text-align: left; gap: 1rem; }
  .echelle { justify-content: end; }
  .legende-note { display: none; }
  .bloc-tete { grid-template-columns: minmax(0, 1fr); }
  .domaine { grid-template-columns: minmax(0, 1fr); }
  .domaine h3 { grid-row: auto; }
  .mire-plages { grid-template-columns: minmax(0, 1fr); }
  .mire-plages li { min-height: 6.5rem; flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .liste-livrables { grid-template-columns: minmax(0, 1fr); }
  .fiche div { grid-template-columns: 6.5rem 1fr; }
  .planche { gap: 1.75rem 1rem; }
  .regle-graduations li:nth-child(even) { visibility: hidden; }
  .vignette h2, .vignette h3 { font-size: 0.92rem; }
  .vignette-lieu, .vignette-mesure { font-size: 0.78rem; }
  .scene-modele { height: 70svh; min-height: 26rem; margin-inline: 0.9rem; }
  /* boutons au-dessus de l'échelle, panneaux au-dessus des boutons */
  .commandes { top: auto; bottom: 3.4rem; right: var(--marge); left: auto; gap: 0.5rem; }
  .commandes .bouton-filet { white-space: nowrap; padding: 0.5rem 0.6rem 0.45rem; }
  .vues { top: auto; bottom: 6.4rem; left: var(--marge); right: auto; }
  .mesure-aide { top: auto; bottom: 6.4rem; right: var(--marge); max-width: none; }
  .reglages, .scene:has(.vues) .reglages { top: auto; bottom: 6.4rem; right: var(--marge); left: var(--marge); width: auto; max-height: 55%; overflow-y: auto; }
  .legende-ecarts { top: auto; bottom: 7.4rem; left: var(--marge); right: auto; width: 12rem; }
  .lumiere, .cote, .cote-texte { display: none; }
  .scene-modele .scene-texte { top: calc(var(--barre-h) + 3rem); bottom: auto; right: var(--marge); padding: 0; }
  .scene-modele h1 { font-size: 1.6rem; }
  .scene-modele .aide { display: none; }
  .scene-modele .instruments { left: var(--marge); right: auto; bottom: 1rem; display: block; padding: 0; margin: 0; background: none; }
  .scene-modele .legende { display: none; }
  .scene-domaine .scene-texte {
    left: 0; right: 0; bottom: 0; max-width: none; padding: 2.5rem var(--marge) 1.5rem;
    background: linear-gradient(to bottom, transparent, var(--fond) 2.5rem);
  }
  .scene-domaine .instruments { display: none; }
  /* sans coupure de mot : « RÉTRO-INGÉNIERIE » doit tenir dans la largeur */
  .titre-domaine { font-size: min(2rem, 7.5vw); }
  .fiche-modele .fiche div { grid-template-columns: 8.5rem 1fr; }
}

/* ---------------------------------------------------------------- fiche : chargement, plans */
.chargement {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  color: var(--mesure); font-weight: 640; font-stretch: 112%; font-variant-numeric: tabular-nums; font-size: 1.1rem;
  pointer-events: none;
}
.plans-modele { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; }
.plan-modele { max-width: 26rem; }
.plan-modele img, .couple-plan img { background: #fff; display: block; width: 100%; height: auto; }
.rapport-modele { grid-column: 1 / -1; border-top: 1px solid var(--filet); padding-top: 1.5rem; margin-top: 1rem; }
.rapport-modele h2 { font-size: 0.72rem; font-weight: 600; font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pierre-2); margin-bottom: 1rem; }
.rapport-pages { display: grid; gap: 1.5rem; }
.rapport-pages a { display: block; max-width: 80rem; }
.rapport-pages img { display: block; width: 100%; height: auto; background: #fff; }
.rapport-modele p { margin-top: 1rem; font-size: 0.85rem; }
.rapport-modele p a { color: var(--pierre); }
.description-modele { flex: 1 1 20rem; max-width: 62ch; line-height: 1.6; align-self: center; }
/* stèles : deux colonnes justifiées à côté du dessin, une seule sur petit écran */
.description-modele:has(.description-colonnes) { flex-basis: 34rem; max-width: 76ch; }
.description-colonnes { display: block; columns: 2 16rem; column-gap: 2.5rem; text-align: justify; hyphens: auto; }
/* source de l'image et du texte (stèles), puis liens vers les publications */
.credit-modele { display: block; margin-top: 0.9rem; font-size: 0.78rem; line-height: 1.45; color: var(--pierre-2); }
.liens-modele { display: block; margin-top: 0.6rem; }
.description-modele > .liens-modele:first-child { margin-top: 0; }
/* vidéos intégrées : vignette locale et bouton lecture, le lecteur YouTube ne se charge qu'au clic */
.videos-domaine { margin-top: 3.5rem; border-top: 1px solid var(--filet); padding-top: 1.5rem; }
.videos-domaine h2 { font-size: 0.75rem; font-weight: 560; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre-2); margin-bottom: 1.25rem; }
.videos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2rem clamp(1.25rem, 2.5vw, 2.25rem); }
.video p { margin-top: 0.6rem; font-weight: 600; font-stretch: 108%; }
.video-lecture, .video-lecteur { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.video-lecture { position: relative; padding: 0; cursor: pointer; overflow: hidden; }
.video-lecture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-bouton {
  position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; translate: -50% -50%; border-radius: 50%;
  border: 1px solid var(--pierre-2); background: rgb(0 0 0 / 0.55); transition: border-color 0.2s, background 0.2s;
}
.video-bouton::after {
  content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 0.55rem 0 0.55rem 0.9rem; border-color: transparent transparent transparent var(--pierre);
}
.video-lecture:hover .video-bouton, .video-lecture:focus-visible .video-bouton { border-color: var(--mesure); background: rgb(0 0 0 / 0.75); }
.videos-note { margin-top: 1.5rem; font-size: 0.8rem; color: var(--pierre-2); }
/* lien vers un site extérieur : bleu classique souligné */
.lien-externe, .fiche dd .lien-externe { color: #6ea8fe; text-decoration: underline; text-decoration-color: currentColor; }
.lien-externe:hover { color: #9ec5fe; }

/* ---------------------------------------------------------------- stèles : modèle, dessin et texte côte à côte */
.couples { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.couple {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: end;
  border-top: 1px solid var(--filet); padding-top: 1.5rem;
}
.couple.seul { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.7fr); }
.couple-modele img { width: 100%; height: auto; display: block; mix-blend-mode: lighten; }
.couple-plan img { max-height: 24rem; width: auto; max-width: 100%; }
.couple-modele span, .couple-plan span { display: block; margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre-2); }
.couple-modele, .couple-plan { text-decoration: none; }
.couple-modele:hover span, .couple-plan:hover span { color: var(--mesure); }
.couple-texte { align-self: center; grid-column: -2; }
.couple-texte h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-stretch: 112%; font-weight: 660; }
.couple-texte h3 a { text-decoration: none; }
.couple-texte p { color: var(--pierre-2); font-size: 0.9rem; margin-top: 0.3rem; }
.couple-texte .couple-description { color: var(--pierre); font-size: 0.92rem; line-height: 1.5; margin-top: 0.9rem; }
/* titres sur deux lignes (corrections-10) : le changement de ligne arrive en « \n » dans la légende de l'accueil */
[data-legende-titre] { white-space: pre-line; }