/* KYBOS — maquette d'accueil
   Registre : référence Genio (grille visible, onglets numérotés, panneaux crème, titres décalés).
   Autorisés par le client : accent cuivre KYBOS, fond noir à lueurs cuivre (référence Defcom),
   typographie Apple (SF Pro / Inter), page pleine largeur sur grands écrans, et (tour 4)
   onglets, boutons et cartes arrondis en verre sombre. La mono ne reste que sur les relevés du scanner. */

:root {
  --anthracite: #0B0B0B;   /* fond noir : demandé par le client (référence Defcom) */
  --graphite: #1B1B1B;
  --creme: #F0E6DC;
  --creme-2: #DED5C8;
  --greige: #CCC6B6;
  --attenue: #B5AC9C;
  --texte-doux: #CFC8BC;
  --blanc: #FFFFFF;
  --cuivre: #C8893B;
  --cuivre-clair: #E6AE66;
  --trait: #2C2C2C;
  --trait-fort: #3A3A3A;
  --lueur: 200, 137, 59;

  /* typographie Apple : SF Pro sur les appareils Apple, Inter ailleurs (demandé par le client) */
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --marge: clamp(1rem, 3.6vw, 3.5rem);
  --largeur: 88rem;   /* 1408 px à 1440, ~2600 px sur un écran de 2900 */
}

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

/* la racine grandit avec la fenêtre au-delà de 1440 px : la page occupe tout l'écran sur les grands moniteurs */
html { scroll-behavior: smooth; font-size: clamp(16px, 1.1111vw, 34px); }

body {
  margin: 0;
  background: var(--anthracite);
  color: var(--creme);
  font-family: var(--sf);
  font-size: 1.125rem;
  line-height: 1.47;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; hyphens: none; text-wrap: balance; }
p { margin: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; }

.page { position: relative; overflow-x: clip; }

/* ---------- la grille ---------- */

.cadre {
  width: min(100% - 2 * var(--marge), var(--largeur));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  position: relative;
}

/* traits verticaux de la référence : bords pleins, intérieurs en tirets, tous les 2 colonnes */
.trame { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.trame .cadre { height: 100%; display: block; }
.trame i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background-image: linear-gradient(to bottom, var(--trait) 55%, transparent 0);
  background-size: 1px 0.5625rem;
}
.trame i:nth-child(1) { left: 0; background: var(--trait); }
.trame i:nth-child(2) { left: calc(100% / 6); }
.trame i:nth-child(3) { left: calc(200% / 6); }
.trame i:nth-child(4) { left: 50%; }
.trame i:nth-child(5) { left: calc(400% / 6); }
.trame i:nth-child(6) { left: calc(500% / 6); }
.trame i:nth-child(7) { left: calc(100% - 1px); background: var(--trait); }


/* ---------- éléments communs ----------
   Tour 4 (demande du client : « improve box style ») : onglets, boutons et cartes passent
   en formes arrondies et verre sombre, dans l'esprit Apple déjà demandé pour la typographie. */

:root {
  --bord: rgba(255, 255, 255, .12);
  --bord-fort: rgba(255, 255, 255, .18);
  --carte: #121212;
  --r-carte: 1.5rem;
  --r-image: 1rem;
  --degrade-cuivre: linear-gradient(180deg, #DDA35B 0%, #C8893B 52%, #B87A30 100%);
}

.attenue { color: var(--attenue); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.onglet {
  display: inline-flex; align-items: center; gap: 0.625rem; align-self: start; justify-self: start;
  height: 2rem; padding: 0 1rem 0 0.25rem; border-radius: 999px;
  border: 1px solid var(--bord-fort); background: rgba(16, 16, 16, .86);
  -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  font: 600 0.6875rem/1 var(--sf); text-transform: uppercase; letter-spacing: .09em; color: var(--creme);
  position: relative; z-index: 2; white-space: nowrap;
}
.onglet-num, .offre-num, .pas-num {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4375rem; border-radius: 999px;
  background: var(--degrade-cuivre); color: #0B0B0B; font: 700 0.6875rem/1 var(--sf); letter-spacing: .02em;
}

.libelle { font: 600 0.75rem/1.4 var(--sf); letter-spacing: -0.005em; color: var(--attenue); }
.texte-court { font: 400 1rem/1.5 var(--sf); letter-spacing: -0.01em; color: var(--texte-doux); }
.site-type { font: 600 0.6875rem/1.2 var(--sf); text-transform: uppercase; letter-spacing: .09em; color: var(--cuivre-clair); }

.bouton {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 3.5rem; padding: 0 0.5rem 0 1.5rem; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--degrade-cuivre); color: #0B0B0B;
  font: 600 1.0625rem/1 var(--sf); letter-spacing: -0.015em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0.625rem 1.875rem rgba(200, 137, 59, .22);
  transition: transform .2s, box-shadow .25s, filter .25s, background-color .25s;
}
.bouton:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0.875rem 2.5rem rgba(200, 137, 59, .38); }
.bouton .chevron {
  width: 2.5rem; height: 2.5rem; padding: 0.8125rem; border-radius: 999px; background: rgba(11, 11, 11, .9);
  color: var(--cuivre-clair); stroke-width: 2; transition: transform .25s;
}
.bouton:hover .chevron { transform: translateX(0.125rem); }
.bouton:not(:has(.chevron)) { padding: 0 1.5rem; justify-content: center; }
.bouton-petit { height: 2.5rem; padding: 0 1.125rem !important; font-size: 0.875rem; }
.bouton-second {
  background: rgba(255, 255, 255, .06); color: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--bord-fort); -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem);
}
.bouton-second:hover { background: rgba(255, 255, 255, .1); filter: none; box-shadow: inset 0 0 0 1px rgba(230, 174, 102, .55); }
.chevron, .fleche, .chevron-bas { width: 0.875rem; height: 0.875rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font: 500 1rem/1 var(--sf); letter-spacing: -0.01em; color: var(--cuivre-clair); text-decoration: none;
}
.lien-fleche .fleche { transition: transform .2s; }
.lien-fleche:hover .fleche { transform: translateX(0.25rem); }

/* « ouvrir la capture 3D » : la petite pilule cuivre, avec un cube */
.lien-capture {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start;
  height: 2.25rem; padding: 0 1rem 0 0.75rem; border-radius: 999px; text-decoration: none;
  background: var(--degrade-cuivre); color: #0B0B0B; font: 600 0.875rem/1 var(--sf); letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); transition: filter .2s, transform .2s;
}
.lien-capture::before {
  content: ''; width: 0.9375rem; height: 0.9375rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M8 1.5 14 5v6l-6 3.5L2 11V5z'/%3E%3Cpath d='M2 5l6 3.5L14 5M8 8.5v6'/%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 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M8 1.5 14 5v6l-6 3.5L2 11V5z'/%3E%3Cpath d='M2 5l6 3.5L14 5M8 8.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lien-capture:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* sections : trait plein bord à bord en tête, trait en tirets à travers la pastille d'onglet */
main > section { position: relative; z-index: 1; border-top: 1px solid var(--trait); padding-bottom: 7.5rem; }
main > section > .cadre {
  background-image: linear-gradient(to right, var(--trait) 55%, transparent 0);
  background-size: 0.5625rem 1px; background-repeat: repeat-x; background-position: 0 1rem;
}
main > section .onglet { grid-column: 3 / span 6; grid-row: 1; }

/* le trait cuivre en tirets qui accompagne les titres décalés, comme dans la référence */
main > section:is(.offres, .roles, .essai) > .cadre::after {
  content: ''; position: absolute; top: 0; bottom: -7.5rem; left: calc(100% / 3); width: 1px; pointer-events: none; z-index: 0;
  background-image: linear-gradient(to bottom, var(--cuivre) 55%, transparent 0); background-size: 1px 0.5625rem; opacity: .6;
}

.titre-section { font-size: clamp(2.375rem, 4.6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.022em; color: var(--blanc); }

/* ---------- en-tête : logo, menu du haut, actions ---------- */

.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: transform .5s cubic-bezier(.2, .7, .1, 1), background-color .3s; }
.entete.flotte, .entete:has(.a-menu.ouvert) { background: var(--anthracite); }
.entete.cachee, .chargement .entete { transform: translateY(-100%); }
.entete-ligne { display: flex; align-items: center; gap: 2rem; min-height: 5.75rem; padding: 0 1.375rem; }
.entete-ligne::after { /* le trait d'en-tête traverse toute la page */
  content: ''; position: absolute; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  border-bottom: 1px solid var(--trait-fort);
}
.logo { flex: none; display: block; }
.logo img { height: 3.125rem; width: auto; }

.nav-haut { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-liste { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.nav-liste > li > a, .nav-liste > li > button {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 2.125rem 0; background: none; border: 0; cursor: pointer;
  font: 500 0.9375rem/1 var(--sf); letter-spacing: -0.01em; color: var(--texte-doux); text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.nav-liste > li > a:hover, .nav-liste > li > button:hover, .a-menu.ouvert > button { color: var(--blanc); }
.chevron-bas { width: 0.75rem; height: 0.75rem; transition: transform .25s; }
.a-menu.ouvert .chevron-bas { transform: rotate(180deg); }

.mega {
  position: absolute; top: 100%; left: 50%; width: 100vw; margin-left: -50vw;
  background: rgba(11, 11, 11, .97); border-bottom: 1px solid var(--trait-fort); box-shadow: 0 2rem 4rem rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(-0.5rem);
  transition: opacity .25s, transform .35s cubic-bezier(.2, .7, .1, 1), visibility 0s .35s;
}
.a-menu.ouvert .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s cubic-bezier(.2, .7, .1, 1); }
.mega-grille { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 2.25rem; padding: 2.5rem 1.375rem 3rem; }
.mega-grille-techno { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr) minmax(0, 1.35fr); }
.mega-grille-techno .mega-promo { grid-column: 5; }
.mega-col { display: flex; flex-direction: column; }
.mega-titre a {
  display: block; padding-bottom: 0.875rem; border-bottom: 1px solid var(--trait-fort); text-decoration: none;
  font: 600 1rem/1.2 var(--sf); letter-spacing: -0.012em; color: var(--cuivre-clair);
}
.mega-col > a {
  padding: 0.75rem 0; border-bottom: 1px solid var(--trait); text-decoration: none;
  font: 400 0.9375rem/1.3 var(--sf); letter-spacing: -0.01em; color: var(--creme); transition: color .2s, padding-left .2s;
}
.mega-col > a:hover { color: var(--blanc); padding-left: 0.375rem; }
.mega-promo { position: relative; display: block; min-height: 13rem; border-radius: var(--r-image); overflow: hidden; border: 1px solid var(--bord); text-decoration: none; }
.mega-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.mega-promo:hover img { transform: scale(1.04); }
.mega-promo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 11, 0) 25%, rgba(11, 11, 11, .92)); }
.mega-promo-texte { position: absolute; z-index: 2; left: 1.125rem; right: 1.125rem; bottom: 1rem; display: grid; gap: 0.25rem; font: 400 0.875rem/1.35 var(--sf); color: var(--texte-doux); }
.mega-promo-texte b { font: 600 1.125rem/1.2 var(--sf); letter-spacing: -0.015em; color: var(--blanc); }

.entete-actions { flex: none; display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.menu-bouton {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-content: center; gap: 0.3125rem;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--bord); cursor: pointer; transition: background-color .2s;
}
.menu-bouton:hover { background: rgba(255, 255, 255, .12); }
.menu-bouton span { display: block; width: 1rem; height: 1.5px; background: var(--creme); }

.bandeau { position: relative; z-index: 3; }
.annonce {
  grid-column: 3 / 12; justify-self: center;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.625rem 1.5rem;
  margin-top: 0.75rem; padding: 0.625rem 0.625rem 0.625rem 1.375rem; border-radius: 999px;
  background: rgba(20, 20, 20, .82); border: 1px solid var(--bord); -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem);
  font: 400 0.875rem/1.4 var(--sf); letter-spacing: -0.005em; color: var(--creme);
}
.annonce a {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.875rem; border-radius: 999px;
  background: rgba(200, 137, 59, .14); color: var(--cuivre-clair); text-decoration: none; font-weight: 500;
}

/* ---------- menu latéral : toutes les pages ---------- */

.menu { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; }
.menu::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .65); opacity: 0; transition: opacity .3s; }
.menu-panneau {
  position: absolute; top: 0; right: 0; height: 100%; width: min(40rem, 100%);
  background: #111; border-left: 1px solid var(--trait-fort); padding: 2rem 2.5rem 3rem; display: flex; flex-direction: column; gap: 2.25rem;
  transform: translateX(100%); transition: transform .45s cubic-bezier(.2, .7, .1, 1); overflow-y: auto;
}
.menu-ouvert .menu { visibility: visible; pointer-events: auto; }
.menu-ouvert .menu::before { opacity: 1; }
.menu-ouvert .menu-panneau { transform: none; }
.menu-tete { display: flex; justify-content: space-between; align-items: center; }
.menu-fermer {
  height: 2.5rem; padding: 0 1rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--bord); cursor: pointer;
  font: 500 0.875rem/1 var(--sf);
}
.menu-groupes { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 2.5rem; }
.menu-groupe { display: flex; flex-direction: column; }
.menu-groupe .libelle { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cuivre-clair); margin-bottom: 0.625rem; }
.menu-groupe a { padding: 0.3125rem 0; font: 400 1rem/1.3 var(--sf); letter-spacing: -0.01em; color: var(--texte-doux); text-decoration: none; transition: color .2s; }
.menu-groupe a.menu-principal { padding: 0.375rem 0; font: 600 1.25rem/1.25 var(--sf); letter-spacing: -0.02em; color: var(--blanc); }
.menu-groupe a:hover { color: var(--cuivre-clair); }

/* ---------- l'une : épinglée, le défilement pilote la capture ---------- */

.une { position: relative; z-index: 3 !important; border-top: 0 !important; padding-bottom: 0 !important; height: 520vh; }
.une-epingle { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding-top: 5.75rem; }
.une .bandeau { flex: none; }
.scene-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
/* profondeur de champ : trois couches de flou de plus en plus fortes vers le haut de l'image
   (le fond, en vue plongeante), dosées par --flou que hero.js interpole d'un arrêt à l'autre.
   L'opacité est posée sur chaque couche, jamais sur le parent : un parent semi-transparent
   couperait le backdrop-filter. */
.profondeur { position: absolute; inset: 0 0 auto; height: 70%; z-index: 1; pointer-events: none; }
.profondeur i { position: absolute; inset: 0; opacity: var(--flou, 0); }
.profondeur i:nth-child(1) {
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 38%, transparent 92%); mask: linear-gradient(180deg, #000 0%, #000 38%, transparent 92%);
}
.profondeur i:nth-child(2) {
  -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px);
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 22%, transparent 64%); mask: linear-gradient(180deg, #000 0%, #000 22%, transparent 64%);
}
.profondeur i:nth-child(3) {
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 42%); mask: linear-gradient(180deg, #000 0%, transparent 42%);
}

/* le voile : du noir sous les phrases, pour qu'elles se lisent sur n'importe quelle image */
.une-voile {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, .74) 24%, rgba(11, 11, 11, .28) 44%, rgba(11, 11, 11, 0) 58%),
    linear-gradient(180deg, rgba(11, 11, 11, .75) 0%, rgba(11, 11, 11, 0) 24%),
    linear-gradient(0deg, rgba(11, 11, 11, .7) 0%, rgba(11, 11, 11, 0) 26%);
}

.une-grille { position: relative; z-index: 3; flex: none; padding-top: 1.5rem; }
.une .onglet { grid-column: 3 / span 5; grid-row: 1; }
.une-zone {
  grid-column: 8 / -1; grid-row: 1; justify-self: end; align-self: center;
  font: 500 0.8125rem/1.4 var(--sf); letter-spacing: -0.005em; color: var(--attenue); padding-right: 1.375rem;
}
.une-titre {
  grid-column: 5 / -1; grid-row: 2; margin-top: clamp(1.25rem, 5vh, 3.5rem); padding-left: 1.625rem;
  font-size: clamp(2.25rem, min(4.1vw, 7.2vh), 4.5rem); line-height: 1.04; letter-spacing: -0.024em; color: var(--blanc); text-wrap: balance;
}
.une-titre .attenue { display: block; }
/* ce que fait Kybos, dit dès le premier écran : une étiquette au-dessus du titre, une phrase dessous */
.une-titre .une-sur { display: block; margin-bottom: 1.125rem; font: 500 0.75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--cuivre-clair); }
.une-quoi { grid-column: 5 / -1; grid-row: 3; margin-top: clamp(0.875rem, 2.4vh, 1.5rem); padding-left: 1.625rem; max-width: 44ch; font: 400 clamp(1rem, 1.25vw, 1.1875rem)/1.5 var(--sf); color: var(--texte-doux); }

/* le récit : une phrase par arrêt, avec la vraie capture de l'étape */
.recits { grid-column: 3 / 9; grid-row: 2; position: relative; margin-top: clamp(1.25rem, 5vh, 3.5rem); pointer-events: none; }
.recit { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; } /* opacité pilotée par hero.js */
.recit-lib { font: 500 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--cuivre-clair); }
.recit-titre {
  margin-top: 1rem; max-width: 22ch; text-wrap: balance;
  font-size: clamp(2rem, min(4.2vw, 7.4vh), 4.25rem); line-height: 1.04; letter-spacing: -0.022em; font-weight: 600; color: var(--blanc);
}
.recit-titre .attenue { display: block; }
.recit-texte { margin-top: 1rem; max-width: 44ch; font: 400 1.0625rem/1.5 var(--sf); letter-spacing: -0.012em; color: var(--texte-doux); }
.preuve {
  margin-top: clamp(0.875rem, 2.4vh, 1.5rem); display: flex; align-items: center; gap: 1rem; width: min(31rem, 100%);
  padding: 0.625rem 1rem 0.625rem 0.625rem; border-radius: 1.125rem;
  background: rgba(16, 16, 16, .74); border: 1px solid var(--bord);
  -webkit-backdrop-filter: blur(1rem) saturate(1.2); backdrop-filter: blur(1rem) saturate(1.2);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .35);
}
.preuve img { flex: none; width: clamp(7rem, 10vw, 9.5rem); aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.75rem; }
.preuve-liens { display: grid; gap: 0.5rem; justify-items: start; }
.preuve-lib { font: 600 0.6875rem/1 var(--sf); text-transform: uppercase; letter-spacing: .09em; color: var(--attenue); }
.preuve .lien-fleche { font-size: 0.875rem; color: var(--texte-doux); }
.preuve .lien-fleche:hover { color: var(--cuivre-clair); }

.une :is(.une-titre, .une-quoi, .une-zone, .une-chiffre, .une-action, .releves) { transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .1, 1); }
.une.en-recit :is(.une-titre, .une-quoi, .une-zone, .une-chiffre, .une-action, .releves) { opacity: 0; pointer-events: none; }
.une.en-recit .une-action .lien-capture { visibility: hidden; }
.une.en-recit .une-titre { transform: translateY(-1.5rem); }

.une-bande { position: relative; z-index: 3; flex: 1; min-height: 0; grid-template-rows: auto 1fr auto auto; padding-bottom: clamp(0.875rem, 2.6vh, 1.625rem); }
/* the band is laid over the story's sentences: its empty space lets clicks through to their links; what it holds stays clickable */
.une-bande { pointer-events: none; }
.une-bande > * { pointer-events: auto; }
/* l'onglet de section se pose au-dessus des cartes d'étape, qu'il nomme */
.une .onglet-etapes { grid-column: 3 / span 6; grid-row: 3; align-self: end; margin-bottom: 0.875rem; }
.une-chiffre { grid-column: 3 / 5; grid-row: 1; margin-top: clamp(0.875rem, 4vh, 2.75rem); padding-left: 1.625rem; display: grid; gap: 0.875rem; align-content: start; }
.chiffre { font: 600 4.25rem/1 var(--sf); letter-spacing: -0.022em; color: var(--blanc); }
.une-chiffre p { font: 400 0.9375rem/1.45 var(--sf); letter-spacing: -0.01em; color: var(--texte-doux); max-width: 22ch; }
.une-action { grid-column: 10 / -1; grid-row: 1; margin-top: clamp(0.875rem, 4vh, 2.75rem); align-self: start; display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.une-action .lien-fleche { justify-content: flex-end; color: var(--texte-doux); }
.une-action .lien-capture { align-self: flex-end; }
.releves {
  grid-column: 1 / 3; grid-row: 1 / span 2; align-self: start; margin: clamp(0.875rem, 4vh, 2.75rem) 0 0; padding: 0 1.5rem 0 1.375rem; list-style: none;
  font: 600 1rem/1.2 var(--sf); letter-spacing: -0.015em; color: var(--creme);
}
.releves li { padding: 0.5rem 0; border-top: 1px solid var(--trait); }
.releves span { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: -0.005em; color: var(--attenue); margin-bottom: 0.1875rem; }

/* les cartes d'étape : une pellicule des vraies captures */
.cartes-etapes { grid-column: 3 / -1; grid-row: 4; align-self: end; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625rem; }
.carte-etape {
  position: relative; display: block; height: clamp(5.25rem, 13vh, 7.5rem); padding: 0; border-radius: var(--r-image); overflow: hidden;
  background: #141414; border: 1px solid var(--bord); cursor: pointer; text-align: left; color: var(--blanc);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35); transition: border-color .3s, transform .3s;
}
.carte-etape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.7); transition: opacity .4s, transform .8s cubic-bezier(.2, .7, .1, 1), filter .4s; }
.carte-etape::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 11, .05) 0%, rgba(11, 11, 11, .85) 100%); }
.carte-lib { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 0.875rem; display: flex; align-items: baseline; gap: 0.625rem; }
.carte-num { font: 600 0.75rem/1 var(--sf); letter-spacing: .06em; color: var(--cuivre-clair); }
.carte-nom { font: 600 1.0625rem/1.1 var(--sf); letter-spacing: -0.015em; }
.carte-etape::before { content: ''; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cuivre-clair); transform: scaleX(var(--avance, 0)); transform-origin: left; }
.carte-etape:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .28); }
.carte-etape:hover img { opacity: .7; transform: scale(1.05); }
.carte-etape.actif { border-color: rgba(230, 174, 102, .65); }
.carte-etape.actif img { opacity: .85; filter: saturate(1); }

.une.sans-webgl .scene-3d { display: none; }
.une.sans-webgl .une-epingle { background: linear-gradient(90deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, .72) 45%, rgba(11, 11, 11, .3) 100%), #0b0b0b url(/img/hero-poster.jpg) 60% 60% / cover no-repeat; } /* the still picture, darkened under the text */

/* progression du défilement, à droite */
.progression {
  position: absolute; z-index: 3; right: max(0.625rem, calc(var(--marge) / 2 - 0.375rem)); top: 50%; transform: translateY(-50%);
  display: grid; justify-items: center; gap: 0.625rem; font: 500 0.625rem/1 var(--mono); letter-spacing: .06em; color: var(--attenue);
}
.progression-num { color: var(--cuivre-clair); }
.progression-barre {
  position: relative; width: 0.5625rem; height: 9.375rem;
  background:
    linear-gradient(var(--attenue), var(--attenue)) 0 0 / 0.5625rem 1px no-repeat,
    linear-gradient(var(--attenue), var(--attenue)) 0 100% / 0.5625rem 1px no-repeat,
    linear-gradient(var(--trait-fort), var(--trait-fort)) 50% 0 / 1px 100% no-repeat;
}
.progression-barre b { position: absolute; left: 0.1875rem; top: 0; width: 0.1875rem; height: 100%; background: var(--cuivre); transform: scaleY(var(--p, 0)); transform-origin: top; }
.defiler {
  position: absolute; z-index: 3; right: max(0.625rem, calc(var(--marge) / 2 - 0.375rem)); top: calc(50% + 6.875rem);
  writing-mode: vertical-rl; font: 500 0.625rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--attenue);
  transition: opacity .4s;
}
.une.en-recit .defiler { opacity: 0; }
.trame-fondu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }

/* repères : ce que la capture a relevé */
.reperes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.repere { position: absolute; left: 0; top: 0; height: 0; display: flex; align-items: center; padding-left: 2.125rem; opacity: 0; transition: opacity .35s; white-space: nowrap; }
.repere::before {
  content: ''; position: absolute; left: -0.75rem; top: -0.75rem; width: 1.5rem; height: 1.5rem; --c: var(--cuivre-clair);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 0.4375rem 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px 0.4375rem no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 0.4375rem 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 0.4375rem no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 0.4375rem 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px 0.4375rem no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 0.4375rem 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 0.4375rem no-repeat;
  transform: scale(2.2); transition: transform .5s cubic-bezier(.2, .7, .1, 1);
}
.repere::after { content: ''; position: absolute; left: 0.75rem; top: 0; width: 1.375rem; border-top: 1px solid var(--cuivre-clair); }
.repere > span {
  display: flex; gap: 0.5rem; align-items: center; background: rgba(11, 11, 11, .88); border: 1px solid var(--trait-fort); border-radius: 999px; padding: 0.375rem 0.75rem;
  font: 500 0.625rem/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--creme);
}
.repere b { color: var(--cuivre-clair); font-weight: 500; }
.repere.gauche { padding-left: 0; padding-right: 2.125rem; }
.repere.gauche::before { left: auto; right: -0.75rem; }
.repere.gauche::after { left: auto; right: 0.75rem; }
.repere.visible { opacity: 1; }
.repere.visible::before { transform: scale(1); }

/* ---------- la visionneuse : une capture 3D par-dessus la page ---------- */

.visionneuse {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem);
}
.visionneuse[hidden] { display: none; }
.visionneuse-boite {
  width: min(100%, 92rem); height: min(100%, 58rem); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 1.25rem; background: #0f0f0f; border: 1px solid var(--bord); box-shadow: 0 2rem 6rem rgba(0, 0, 0, .6);
}
.visionneuse-barre { display: flex; align-items: center; gap: 1.25rem; padding: 0.625rem 0.625rem 0.625rem 1.25rem; border-bottom: 1px solid var(--trait); }
.visionneuse-titre { flex: 1; font: 600 0.875rem/1 var(--sf); color: var(--creme); }
.visionneuse-onglet { font: 500 0.875rem/1 var(--sf); color: var(--cuivre-clair); text-decoration: none; }
.visionneuse-fermer { height: 2.25rem; padding: 0 1rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--bord); color: var(--creme); cursor: pointer; font: 500 0.875rem/1 var(--sf); }
.visionneuse-cadre { flex: 1; position: relative; background: #000; }
.visionneuse-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 02 · trois façons de travailler ---------- */

.offres-titre { grid-column: 5 / -1; grid-row: 2; margin-top: 7rem; padding-left: 1.625rem; }
.offres-intro { grid-column: 5 / 11; grid-row: 3; margin-top: 1.5rem; padding-left: 1.625rem; font: 400 1.3125rem/1.42 var(--sf); letter-spacing: -0.018em; color: var(--texte-doux); }
.cartes-offres { grid-column: 1 / -1; grid-row: 4; margin-top: 4.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; position: relative; z-index: 1; }
.offre {
  position: relative; display: flex; flex-direction: column; padding: 0.75rem 0.75rem 1.75rem; border-radius: var(--r-carte);
  background: linear-gradient(180deg, #161616, #101010); border: 1px solid var(--bord); transition: border-color .3s, transform .4s cubic-bezier(.2, .7, .1, 1);
}
.offre:hover { border-color: rgba(230, 174, 102, .45); transform: translateY(-4px); }
.offre-phare {
  border-color: rgba(230, 174, 102, .38);
  background: radial-gradient(120% 60% at 50% 0%, rgba(200, 137, 59, .18), transparent 62%), linear-gradient(180deg, #181512, #101010);
}
.offre-image { border-radius: var(--r-image); overflow: hidden; aspect-ratio: 16 / 10; }
.offre-image img, .frise figure img, .site-vivant figure img, .drone-image img, .fondateur img, .visite > img, .visite > picture > img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .1, 1); }
.offre:hover .offre-image img, .site-vivant:hover figure img, .drone:hover .drone-image img, .visite:hover > img, .visite:hover > picture > img { transform: scale(1.04); }
.offre-num { position: absolute; top: 1.5rem; left: 1.5rem; z-index: 2; }
.offre-pour { margin: 1.5rem 1rem 0; font: 600 0.6875rem/1.3 var(--sf); text-transform: uppercase; letter-spacing: .09em; color: var(--cuivre-clair); }
.offre h3 { margin: 0.625rem 1rem 0; font-size: clamp(1.75rem, 2.4vw, 2.375rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--blanc); }
.offre-accroche { margin: 0.375rem 1rem 0; font: 500 1.1875rem/1.3 var(--sf); letter-spacing: -0.015em; color: var(--attenue); }
.offre .texte-court { margin: 1rem 1rem 0; }
.offre-puces, .atlas-fonctions { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0; }
.offre-puces { margin: 1.25rem 1rem 0; }
.offre-puces li, .atlas-fonctions li {
  padding: 0.5rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--bord);
  font: 500 0.8125rem/1 var(--sf); letter-spacing: -0.005em; color: var(--texte-doux);
}
.offre .lien-fleche { margin: auto 1rem 0; padding-top: 1.75rem; }

/* ---------- 03 · le dossier de construction ---------- */

.dossier::before, .appel::before, .atlas::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; width: min(100vw, 75rem); aspect-ratio: 1.5;
  transform: translate(-50%, -50%); filter: blur(1.875rem);
  background: radial-gradient(closest-side, rgba(var(--lueur), .26), rgba(var(--lueur), .09) 48%, rgba(var(--lueur), 0) 100%);
}
.dossier::before { left: 30%; top: 30%; }
.appel::before { left: 30%; top: 55%; }
.atlas::before { left: 70%; top: 40%; }

.dossier-titre { grid-column: 3 / 9; grid-row: 2; margin-top: 7rem; font-size: clamp(2.75rem, 5.8vw, 6rem); line-height: 1.02; letter-spacing: -0.028em; }
.dossier-texte { grid-column: 9 / -1; grid-row: 2; margin-top: 7rem; align-self: end; display: grid; gap: 1.125rem; padding-left: 1.625rem; }
.dossier-intro { font: 500 1.375rem/1.38 var(--sf); letter-spacing: -0.02em; color: var(--creme); }
.dossier-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }

.frise { grid-column: 1 / -1; grid-row: 3; margin: 4.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; counter-reset: etape; }
.frise::after { content: ''; position: absolute; z-index: 0; left: 1rem; right: 1rem; top: 1rem; height: 1px; background: linear-gradient(90deg, var(--cuivre), rgba(200, 137, 59, .2)); }
.frise li { position: relative; z-index: 1; display: grid; gap: 0.375rem; align-content: start; }
.frise li::before {
  content: counter(etape, decimal-leading-zero); counter-increment: etape;
  display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 1rem; border-radius: 999px;
  background: var(--degrade-cuivre); color: #0B0B0B; font: 700 0.6875rem/1 var(--sf); box-shadow: 0 0 0 0.375rem var(--anthracite);
}
.frise figure { border-radius: var(--r-image); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--bord); }
.frise b { margin-top: 0.875rem; font: 600 1.25rem/1.15 var(--sf); letter-spacing: -0.02em; color: var(--blanc); }
.frise span { font: 400 0.9375rem/1.4 var(--sf); color: var(--attenue); }

.possede { grid-column: 1 / 7; grid-row: 4; margin-top: 4.5rem; padding: 2rem; border-radius: var(--r-carte); background: var(--carte); border: 1px solid var(--bord); }
.possede h3 { font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--blanc); }
.possede h3 .attenue { display: block; }
.possede table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; font: 400 0.9375rem/1.35 var(--sf); }
.possede th, .possede td { text-align: left; padding: 0.875rem 0.5rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.possede thead th { font: 600 0.6875rem/1.2 var(--sf); text-transform: uppercase; letter-spacing: .08em; color: var(--attenue); }
.possede thead th:nth-child(2) { color: var(--cuivre-clair); }
.possede tbody th { font-weight: 500; color: var(--texte-doux); }
.possede tbody td:nth-child(2) { color: var(--blanc); font-weight: 600; }
.possede tbody td:nth-child(3) { color: var(--attenue); }
.usages { grid-column: 7 / -1; grid-row: 4; margin: 4.5rem 0 0; padding: 0 0 0 1.25rem; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.usages li { padding: 1.5rem; border-radius: 1.25rem; border: 1px solid var(--bord); background: rgba(255, 255, 255, .02); display: grid; gap: 0.5rem; align-content: start; }
.usages b { font: 600 1.1875rem/1.2 var(--sf); letter-spacing: -0.02em; color: var(--blanc); }
.usages p { font: 400 0.9375rem/1.45 var(--sf); color: var(--attenue); }

/* ---------- 04 · Site Atlas ---------- */

.atlas-vol { grid-column: 1 / -1; grid-row: 2; margin-top: 3rem; position: relative; display: grid; align-items: end; min-height: clamp(30rem, 72vh, 46rem); border-radius: 1.75rem; overflow: hidden; border: 1px solid var(--bord); background: #000; }
.atlas-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.atlas-vol::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .62) 38%, rgba(11, 11, 11, 0) 70%), linear-gradient(0deg, rgba(11, 11, 11, .55), rgba(11, 11, 11, 0) 40%); }
.atlas-texte { position: relative; z-index: 2; max-width: 38rem; padding: clamp(2rem, 5vw, 4.5rem); display: grid; gap: 1.375rem; justify-items: start; }
.atlas-titre { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
.atlas-titre .attenue { display: block; }
.atlas-texte p { font: 400 1.125rem/1.5 var(--sf); letter-spacing: -0.012em; color: var(--texte-doux); }
.atlas-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sites-vivants { grid-column: 1 / -1; grid-row: 3; margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.site-vivant {
  display: grid; gap: 0.5rem; align-content: start; padding: 0.75rem 0.75rem 1.5rem; border-radius: var(--r-carte);
  background: var(--carte); border: 1px solid var(--bord); text-decoration: none; transition: border-color .3s, transform .4s cubic-bezier(.2, .7, .1, 1);
}
.site-vivant:hover { border-color: rgba(230, 174, 102, .45); transform: translateY(-3px); }
.site-vivant figure { border-radius: var(--r-image); overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 0.75rem; }
.site-vivant .site-type, .site-vivant h3, .site-vivant p { padding: 0 0.75rem; }
.site-vivant h3 { font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.022em; color: var(--blanc); }
.site-vivant p { font: 400 0.9375rem/1.45 var(--sf); color: var(--attenue); }
.atlas-fonctions { grid-column: 1 / -1; grid-row: 4; margin: 1.75rem 0 0; }

/* ---------- 05 · drone et services spatiaux ---------- */

.services-titre { grid-column: 3 / 11; grid-row: 2; margin-top: 7rem; }
.drone { grid-column: 1 / 7; grid-row: 3; margin-top: 3.5rem; position: relative; display: block; min-height: 34rem; border-radius: var(--r-carte); overflow: hidden; border: 1px solid var(--bord); text-decoration: none; }
.drone-image { position: absolute; inset: 0; }
.drone::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .35) 48%, rgba(11, 11, 11, 0) 70%); }
.drone-thermique { position: absolute; z-index: 2; right: 1.25rem; top: 1.25rem; width: 36%; border-radius: var(--r-image); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .45); }
.drone-thermique img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.drone-texte { position: absolute; z-index: 2; left: 1.75rem; right: 1.75rem; bottom: 1.75rem; max-width: 30rem; display: grid; gap: 0.625rem; justify-items: start; font: 400 1rem/1.5 var(--sf); color: var(--texte-doux); }
.drone-texte b { font: 600 clamp(2rem, 3vw, 2.75rem)/1.05 var(--sf); letter-spacing: -0.025em; color: var(--blanc); }
.liste-services { grid-column: 7 / -1; grid-row: 3; margin: 3.5rem 0 0; padding: 0 0 0 1.625rem; list-style: none; border-top: 1px solid var(--trait); }
.service a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 7.5rem; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 1.125rem 0; border-bottom: 1px solid var(--trait); text-decoration: none; }
.service-num { grid-row: 1 / 3; font: 600 0.75rem/1 var(--sf); letter-spacing: .06em; color: var(--cuivre-clair); }
.service-nom { grid-column: 2; align-self: end; font: 600 clamp(1.25rem, 1.8vw, 1.75rem)/1.1 var(--sf); letter-spacing: -0.02em; color: var(--blanc); transition: color .25s; }
.service-spec { grid-column: 2; align-self: start; margin-top: 0.25rem; font: 400 0.9375rem/1.4 var(--sf); letter-spacing: -0.005em; color: var(--attenue); }
.service-vignette { grid-column: 3; grid-row: 1 / 3; border-radius: 0.75rem; overflow: hidden; }
.service-vignette img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .1, 1); }
.service a:hover .service-nom { color: var(--cuivre-clair); }
.service a:hover .service-vignette img { transform: scale(1.06); }

/* ---------- 06 · pour qui ---------- */

.roles-titre { grid-column: 5 / -1; grid-row: 2; margin-top: 7rem; padding-left: 1.625rem; }
.roles-intro { grid-column: 5 / 10; grid-row: 3; margin-top: 1.5rem; padding-left: 1.625rem; }
.cartes-roles { grid-column: 1 / -1; grid-row: 4; margin-top: 4.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; position: relative; z-index: 1; }
.carte-role { display: grid; align-content: start; padding: 0.75rem 0.75rem 1.5rem; border-radius: var(--r-carte); background: var(--carte); border: 1px solid var(--bord); }
.carte-role > :not(.schema) { margin-left: 0.75rem; margin-right: 0.75rem; }
.schema {
  height: 12.5rem; border-radius: var(--r-image); background-color: var(--creme-2);
  background-image: radial-gradient(#c3b9a9 1px, transparent 1.4px); background-size: 0.75rem 0.75rem;
  display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 1.125rem; position: relative;
}
.schema span, .schema b { font: 600 0.6562rem/1 var(--sf); text-transform: uppercase; letter-spacing: .05em; color: var(--anthracite); }
.schema-frise::before { content: ''; position: absolute; left: 1.375rem; right: 1.375rem; top: 50%; border-top: 1px dashed var(--anthracite); }
.schema-frise span, .schema-sites span, .schema-ecart span, .schema-maison span { position: relative; background: var(--creme); border: 1px solid var(--anthracite); border-radius: 0.375rem; box-shadow: 0.125rem 0.125rem 0 var(--anthracite); }
.schema-frise span { padding: 0.4375rem; }
.schema-frise .maintenant { background: var(--cuivre); }
.schema-frise .maintenant::after { content: 'Now'; position: absolute; left: 50%; top: calc(100% + 1rem); transform: translateX(-50%); font: 600 0.625rem/1 var(--sf); background: var(--anthracite); color: var(--creme); padding: 0.3125rem 0.375rem; border-radius: 0.25rem; }
.schema-sites { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.schema-sites span { display: grid; grid-template-columns: 3.375rem 1fr; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; }
.schema-sites i { display: block; height: 0.375rem; border-radius: 999px; background: linear-gradient(to right, var(--cuivre) calc(var(--p) * 100%), #d3c9ba 0); }
.schema-ecart span { padding: 0.5rem 0.5625rem; }
.schema-ecart .ecart { background: var(--cuivre); }
.schema-maison { flex-direction: column; gap: 0.875rem; }
.schema-maison svg { width: 4rem; height: 4rem; fill: none; stroke: var(--anthracite); stroke-width: 1.2; }
.schema-maison span { padding: 0.4375rem 0.5625rem; }
.carte-role h3 { margin-top: 1.5rem; font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.025em; color: var(--blanc); }
.carte-role .texte-court { margin-top: 0.75rem; }
.meilleur { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--trait); font: 500 0.875rem/1.3 var(--sf); color: var(--attenue); }
.meilleur a { color: var(--cuivre-clair); font-weight: 600; text-decoration: none; }
.meilleur a:hover { text-decoration: underline; }

/* ---------- 07 · une vraie capture, et le déroulé ---------- */

.essai-titre { grid-column: 5 / -1; grid-row: 2; margin-top: 7rem; padding-left: 1.625rem; }
.essai-texte { grid-column: 5 / 10; grid-row: 3; margin-top: 1.5rem; padding-left: 1.625rem; }
.visite { grid-column: 1 / -1; grid-row: 4; margin-top: 4rem; position: relative; display: block; border-radius: 1.75rem; overflow: hidden; border: 1px solid var(--bord); z-index: 1; }
.visite > img, .visite > picture > img { aspect-ratio: 16 / 7; }
.visite::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(11, 11, 11, .55), rgba(11, 11, 11, 0) 45%); }
.visite-bouton {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 1rem; padding: 0.5rem 1.5rem 0.5rem 0.5rem; border-radius: 999px;
  background: rgba(11, 11, 11, .72); border: 1px solid var(--bord-fort); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
  transition: transform .3s cubic-bezier(.2, .7, .1, 1);
}
.visite:hover .visite-bouton { transform: translate(-50%, -50%) scale(1.04); }
.visite-bouton .carre { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; background: var(--degrade-cuivre); color: #0B0B0B; }
.visite-bouton .carre svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.visite-lib { font: 600 1.0625rem/1 var(--sf); letter-spacing: -0.015em; color: var(--blanc); }
.visite-legende { position: absolute; z-index: 2; left: 1.5rem; bottom: 1.5rem; padding: 0.625rem 1rem; border-radius: 999px; background: rgba(11, 11, 11, .72); font: 500 0.8125rem/1 var(--sf); color: var(--creme); }
.pas { grid-column: 1 / 8; grid-row: 5; margin: 4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.pas li { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1.25rem; padding: 1.75rem 1.75rem 1.875rem 0; border-bottom: 1px solid var(--trait); }
.pas-num { grid-row: 1 / 3; align-self: start; justify-self: start; }
.pas h3 { font-size: 1.875rem; line-height: 1.08; letter-spacing: -0.02em; color: var(--blanc); }
.pas .texte-court { margin-top: 0.625rem; max-width: 56ch; }
.fondateur { grid-column: 9 / -1; grid-row: 5; margin-top: 4rem; display: grid; align-content: start; }
.fondateur img { aspect-ratio: 4 / 3; border-radius: var(--r-image); object-position: 0% 50%; filter: saturate(.85); }
.fondateur figcaption { margin-top: 1rem; font: 400 0.9375rem/1.5 var(--sf); letter-spacing: -0.005em; color: var(--attenue); }
.fondateur figcaption b { color: var(--blanc); font-weight: 600; }

/* ---------- 08 · zone et appel ---------- */

.carte-zone { grid-column: 1 / 7; grid-row: 2 / 4; margin-top: 5rem; align-self: start; }
/* la carte : le tracé du client, teinté cuivre, révélé depuis la frontière NSW–QLD ; les points mènent au contact */
@property --portee { syntax: '<length>'; inherits: true; initial-value: 0rem; }
.carte-oceanie { position: relative; aspect-ratio: 824 / 461; --hx: 56.55%; --hy: 54.88%; --portee: 0rem; transition: --portee 2.6s cubic-bezier(.3, .6, .2, 1); }
.carte-zone.vu .carte-oceanie, .carte-zone:not(.apparait) .carte-oceanie { --portee: 70rem; }
.carte-trace {
  position: absolute; inset: 0; background: var(--cuivre-clair);
  -webkit-mask: url(/img/oceanie.webp) center / 100% 100% no-repeat, radial-gradient(circle at var(--hx) var(--hy), #000 var(--portee), transparent calc(var(--portee) + 6rem));
  -webkit-mask-composite: source-in;
  mask: url(/img/oceanie.webp) center / 100% 100% no-repeat, radial-gradient(circle at var(--hx) var(--hy), #000 var(--portee), transparent calc(var(--portee) + 6rem));
  mask-composite: intersect;
}
.carte-sonar { position: absolute; left: var(--hx); top: var(--hy); width: 1px; height: 1px; pointer-events: none; }
.carte-sonar::before, .carte-sonar::after {
  content: ''; position: absolute; left: 0; top: 0; width: 22rem; height: 22rem; margin: -11rem; border-radius: 50%;
  border: 1px solid rgba(230, 174, 102, .5); transform: scale(0); opacity: 0;
}
.carte-zone.vu .carte-sonar::before, .carte-zone.vu .carte-sonar::after { animation: sonar 3.6s cubic-bezier(.2, .6, .2, 1) infinite; }
.carte-zone.vu .carte-sonar::after { animation-delay: 1.8s; }
@keyframes sonar { 0% { transform: scale(0); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.point {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem; border-radius: 50%;
  background: var(--cuivre-clair); box-shadow: 0 0 0 3px rgba(11, 11, 11, .9), 0 0 1rem rgba(230, 174, 102, .7);
  opacity: 0; transform: scale(0); transition: opacity .4s, transform .6s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--t) + .5s);
}
.carte-zone.vu .point, .carte-zone:not(.apparait) .point { opacity: 1; transform: none; }
.point::after { content: ''; position: absolute; inset: -0.375rem; border-radius: 50%; border: 1.5px solid var(--cuivre-clair); opacity: 0; animation: battement 2.4s ease-out infinite; animation-delay: calc(var(--t) * 2); }
@keyframes battement { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.point-base { width: 1.125rem; height: 1.125rem; margin: -0.5625rem 0 0 -0.5625rem; background: var(--degrade-cuivre); }
.point-etiquette {
  position: absolute; left: 50%; bottom: calc(100% + 0.75rem); transform: translate(-50%, 0.25rem); display: grid; gap: 0.125rem; white-space: nowrap;
  padding: 0.5rem 0.875rem; border-radius: 0.75rem; background: rgba(16, 16, 16, .9); border: 1px solid var(--bord-fort);
  -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem);
  font: 400 0.75rem/1.3 var(--sf); color: var(--attenue); text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.point-etiquette b { font: 600 0.875rem/1.2 var(--sf); color: var(--blanc); letter-spacing: -0.01em; }
.point-etiquette i { position: absolute; right: 0.625rem; top: 0.5rem; font-style: normal; color: var(--cuivre-clair); }
.point-etiquette b { padding-right: 1.25rem; }
.point:hover .point-etiquette, .point:focus-visible .point-etiquette, .point-base .point-etiquette { opacity: 1; transform: translate(-50%, 0); }
.carte-zone:has(.point:not(.point-base):hover) .point-base .point-etiquette, .carte-zone:has(.point:not(.point-base):focus-visible) .point-base .point-etiquette { opacity: 0; }
.point-base .point-etiquette { left: auto; right: calc(100% + 0.75rem); bottom: auto; top: 50%; transform: translateY(-50%); }
.point:hover, .point:focus-visible { z-index: 3; }
.carte-zone figcaption { margin-top: 1.25rem; font: 400 0.875rem/1.5 var(--sf); color: var(--attenue); text-align: center; }
.appel-texte { grid-column: 7 / -1; grid-row: 2; margin-top: 7rem; padding-left: 1.625rem; display: grid; justify-items: start; align-content: start; }
.appel-titre { font-size: clamp(2.5rem, 4.8vw, 4.625rem); line-height: 1.04; letter-spacing: -0.022em; color: var(--blanc); }
.appel-texte > .texte-court { margin-top: 1.375rem; }
.appel-texte .bouton { margin-top: 2.25rem; min-width: 18rem; }
.coordonnees { list-style: none; margin: 2.875rem 0 0; padding: 0; width: 100%; border-top: 1px solid var(--trait); }
.coordonnees li { display: grid; grid-template-columns: 7.5rem 1fr; padding: 0.9375rem 0; border-bottom: 1px solid var(--trait); font-size: 1.3125rem; }
.coordonnees span { font: 500 0.8125rem/1.9 var(--sf); letter-spacing: -0.005em; color: var(--attenue); }
.coordonnees a { text-decoration: none; }
.coordonnees a:hover { color: var(--cuivre-clair); }
.zones { margin-top: 1.375rem; font: 400 0.875rem/1.6 var(--sf); letter-spacing: -0.005em; color: var(--attenue); }

/* ---------- 09 · questions ---------- */

.questions-titre { grid-column: 3 / 6; grid-row: 2; margin-top: 7rem; align-self: start; }
.faq { grid-column: 6 / -1; grid-row: 2; margin-top: 7rem; padding-left: 1.625rem; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 3.25rem 1fr 1.5rem; align-items: baseline;
  padding: 1.5rem 0; font-size: 1.375rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--blanc);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { font: 600 0.75rem/1 var(--sf); color: var(--cuivre-clair); letter-spacing: .06em; }
.faq summary::after { content: '+'; font: 300 1.75rem/1 var(--sf); color: var(--attenue); justify-self: end; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--cuivre-clair); }
.faq details p { padding: 0 2.5rem 1.75rem 3.25rem; max-width: 64ch; font-size: 1.0625rem; color: var(--texte-doux); }
.faq details p a { color: var(--cuivre-clair); }

/* ---------- pied ---------- */

.pied { position: relative; z-index: 1; border-top: 1px solid var(--trait); background: linear-gradient(to bottom, rgba(11, 11, 11, 0), #191919); }
.pied-grille { padding: 4.375rem 0 4.5rem; row-gap: 2.5rem; }
.pied-marque { grid-column: 1 / 5; padding-left: 1.375rem; padding-right: 2rem; display: grid; gap: 1.375rem; align-content: start; justify-items: start; }
.pied-marque img { height: 3.25rem; width: auto; }
.pied-marque .texte-court { max-width: 30ch; color: var(--attenue); }
.pied-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.pied-contact a { font: 600 1.125rem/1.3 var(--sf); letter-spacing: -0.015em; text-decoration: none; color: var(--blanc); }
.pied-contact a:hover { color: var(--cuivre-clair); }
.pied-col { grid-column: span 2; display: grid; gap: 1.125rem; align-content: start; }
.pied-col .libelle { text-transform: uppercase; font-size: 0.6875rem; letter-spacing: .1em; color: var(--cuivre-clair); }
.pied-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.pied-col a { font: 400 0.875rem/1.4 var(--sf); letter-spacing: -0.005em; text-decoration: none; color: var(--creme); }
.pied-col a:hover { color: var(--cuivre-clair); }
.pied-bas {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 1.375rem 1.375rem 1.25rem;
  border-top: 1px solid var(--trait); font: 400 0.75rem/1.4 var(--sf); letter-spacing: 0; color: var(--attenue);
}
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--cuivre-clair); }
.pied-note { display: block; padding: 0 1.375rem 2.25rem; font: 400 0.75rem/1.55 var(--sf); color: #857e73; }

/* ---------- préchargeur : le scanner se calibre ---------- */

.prechargeur { display: none; }
.chargement { overflow: hidden; }
.chargement .prechargeur { position: fixed; inset: 0; z-index: 100; background: var(--anthracite); display: grid; place-content: center; justify-items: center; }
.prechargeur.dissout { background: transparent; }
.prechargeur > :not(canvas) { transition: opacity .25s; }
.prechargeur.dissout > :not(canvas) { opacity: 0; }
/* le scan LiDAR : un plan laser balaie le logo et laisse un nuage de points qui devient le logo */
.scan { position: relative; width: 10.5rem; aspect-ratio: 536 / 620; }
.scan-logo { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .6s ease; }
.scan-nuage { position: absolute; left: -6rem; top: -2.5rem; width: calc(100% + 8.5rem); height: calc(100% + 5rem); transition: opacity .6s ease; }
.scan.net .scan-logo { opacity: 1; }
.scan.net .scan-nuage { opacity: 0; }
.prechargeur-lib { margin-top: 3rem; font: 500 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--attenue); }
.prechargeur-num { margin-top: 0.875rem; font: 400 2.5rem/1 var(--mono); color: var(--creme); letter-spacing: .02em; }
.prechargeur-barre { display: block; margin-top: 1.125rem; width: 13.125rem; height: 0.125rem; background: var(--trait-fort); }
.prechargeur-barre b { display: block; height: 100%; background: var(--cuivre); transform-origin: left; transform: scaleX(var(--p, 0)); }
.prechargeur-trame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* titres : chaque mot s'allume en cuivre puis prend sa couleur (Armory) */
.mots .mot { opacity: 0; color: var(--cuivre-clair); transition: opacity .3s ease, color .8s ease; transition-delay: calc(var(--i) * 60ms), calc(var(--i) * 60ms + 220ms); }
.mots.vu .mot { opacity: 1; color: inherit; }

/* images : une ligne de scan les révèle de haut en bas */
.revele { position: relative; overflow: hidden; }
.revele img { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(.65, .05, .25, 1), transform .9s cubic-bezier(.2, .7, .1, 1); }
.revele::after {
  content: ''; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 0.125rem;
  background: var(--cuivre-clair); box-shadow: 0 0 1.375rem 0.1875rem rgba(230, 174, 102, .55); opacity: 0; pointer-events: none;
}
.revele.vu img { clip-path: inset(0); }
.revele.vu::after { animation: ligne-scan 1.25s cubic-bezier(.65, .05, .25, 1) forwards; }
@keyframes ligne-scan { 0% { top: 0; opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 0.125rem); opacity: 0; } }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-smooth .visionneuse iframe { pointer-events: auto; }

/* ---------- apparition au défilement ---------- */

.apparait { opacity: 0; transform: translateY(1.75rem); transition: opacity .9s cubic-bezier(.2, .7, .1, 1), transform .9s cubic-bezier(.2, .7, .1, 1); }
.apparait.vu { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1240px) {
  .nav-haut { display: none; }
}

@media (max-width: 1100px) {
  .recits { grid-column: 3 / -1; }
  .une-titre, .une-quoi, .offres-titre, .roles-titre, .essai-titre { grid-column: 3 / -1; }
  .une-chiffre { grid-column: 3 / 6; }
  .une-action { grid-column: 9 / -1; }
  .offres-intro, .roles-intro, .essai-texte { grid-column: 3 / 11; }
  .cartes-offres, .sites-vivants { grid-template-columns: 1fr 1fr; }
  .dossier-titre { grid-column: 3 / -1; }
  .dossier-texte { grid-column: 3 / -1; grid-row: 3; margin-top: 2rem; padding-left: 0; }
  .frise { grid-row: 4; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .frise::after { display: none; }
  .possede { grid-column: 1 / -1; grid-row: 5; }
  .usages { grid-column: 1 / -1; grid-row: 6; padding-left: 0; }
  .drone { grid-column: 1 / -1; }
  .liste-services { grid-column: 1 / -1; grid-row: 4; padding-left: 0; }
  .cartes-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pas { grid-column: 1 / -1; }
  .fondateur { grid-column: 1 / 7; grid-row: 6; margin-top: 3rem; }
  .carte-zone { grid-column: 1 / -1; grid-row: 3; margin-top: 2.5rem; }
  .appel-texte { grid-column: 3 / -1; padding-left: 0; }
  .questions-titre { grid-column: 3 / -1; }
  .faq { grid-column: 3 / -1; grid-row: 3; margin-top: 3.125rem; padding-left: 0; }
  .mega-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
  .pied-col { grid-column: span 3; }
}

@media (max-width: 760px) {
  body { font-size: 1.125rem; }
  .trame i:nth-child(2), .trame i:nth-child(3), .trame i:nth-child(5), .trame i:nth-child(6) { display: none; }
  main > section > .cadre::after { display: none !important; }
  .cadre > * { grid-column: 1 / -1 !important; }
  main > section { padding-bottom: 6.25rem; }
  main > section > .cadre { padding: 0 0.875rem; }
  .entete-ligne { min-height: 4.75rem; padding: 0 0.875rem; gap: 1rem; }
  .logo img { height: 2.375rem; }
  .entete-actions .bouton-petit { padding: 0 0.875rem !important; }
  .annonce { margin-top: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.875rem; font-size: 0.75rem; border-radius: 1rem; }
  .une-zone, .une-chiffre, .releves { display: none !important; }
  .une { height: 440vh; }
  .une-epingle { padding-top: 4.75rem; }
  .une-grille { padding-left: 0.875rem; padding-right: 0.875rem; }
  .une-titre { margin-top: 1.5rem; padding: 0; font-size: clamp(1.75rem, 7.6vw, 3rem); }
  .une-quoi { padding: 0; font-size: 0.9375rem; }
  .une-titre .une-sur { font-size: 0.6875rem; margin-bottom: 0.75rem; }
  .recits { margin-top: 1.5rem; }
  .defiler, .progression { display: none; }
  .recit-titre { font-size: clamp(1.875rem, 8.4vw, 2.625rem); }
  .recit-texte { font-size: 0.9375rem; margin-top: 0.75rem; }
  .preuve { padding: 0.5rem; gap: 0.75rem; }
  .preuve img { width: 5.5rem; border-radius: 0.5rem; }
  .preuve-lib { display: none; }
  .preuve-liens { min-width: 0; }
  .lien-capture { height: 2rem; padding: 0 0.75rem 0 0.625rem; font-size: 0.8125rem; max-width: 100%; white-space: normal; line-height: 1.15; }
  .preuve .lien-fleche { font-size: 0.8125rem; }
  .une-bande { padding: 0 0.875rem 0.875rem; }
  .une-action { grid-row: 1; margin-top: 1.125rem; }
  .une-action .lien-capture { align-self: flex-start; }
  .une .onglet-etapes { grid-row: 3; margin-left: 0 !important; margin-bottom: 0.5rem; }
  /* cinq cartes : une bande qui glisse au doigt, chaque nom en entier */
  .cartes-etapes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -0.875rem; padding-right: 0.875rem; }
  .cartes-etapes::-webkit-scrollbar { display: none; }
  .cartes-etapes .carte-etape { flex: 0 0 9.25rem; scroll-snap-align: start; }
  .une-action .lien-fleche { justify-content: flex-start; }
  .cartes-etapes { grid-row: 4; gap: 0.3125rem; }
  .carte-etape { height: 4.25rem; border-radius: 0.75rem; }
  .carte-lib { left: 0.625rem; right: 0.5rem; bottom: 0.5rem; flex-direction: column; gap: 0.25rem; }
  .carte-num { font-size: 0.625rem; }
  .carte-nom { font-size: 0.8125rem; white-space: nowrap; }
  .repere > span { font-size: 0.5625rem; padding: 0.3125rem 0.5rem; }
  .une-voile { background: linear-gradient(180deg, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .7) 40%, rgba(11, 11, 11, 0) 62%), linear-gradient(0deg, rgba(11, 11, 11, .75) 0%, rgba(11, 11, 11, 0) 24%); }

  .offres-titre, .roles-titre, .essai-titre, .services-titre, .questions-titre, .dossier-titre { margin-top: 4.5rem; padding-left: 0; }
  .offres-intro, .roles-intro, .essai-texte { padding-left: 0; font-size: 1.0625rem; }
  .cartes-offres, .sites-vivants, .cartes-roles { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .frise { grid-template-columns: 1fr 1fr; }
  .usages { grid-template-columns: 1fr; }
  .possede { padding: 1.25rem; }
  .possede th, .possede td { padding: 0.75rem 0.25rem; font-size: 0.8125rem; }
  .atlas-vol { min-height: 34rem; border-radius: 1.25rem; }
  .atlas-vol::after { background: linear-gradient(0deg, rgba(11, 11, 11, .95) 0%, rgba(11, 11, 11, .6) 55%, rgba(11, 11, 11, .1) 100%); }
  .atlas-texte { padding: 1.5rem; }
  .drone { min-height: 28rem; }
  .drone-thermique { width: 42%; }
  .service a { grid-template-columns: 2rem minmax(0, 1fr) 5.5rem; }
  .visite > img, .visite > picture > img { aspect-ratio: 4 / 5; }
  .visite-lib { display: none; }
  .visite-bouton { padding: 0.375rem; }
  .visite-legende { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; font-size: 0.75rem; line-height: 1.4; text-align: center; }
  .pas li { grid-template-columns: 2.75rem 1fr; padding-right: 0; }
  .pas h3 { font-size: 1.625rem; }
  .fondateur { grid-row: 6; }
  .appel-texte { margin-top: 4.5rem; grid-row: 2; }
  .carte-zone { grid-row: 3; }
  .appel-texte .bouton { min-width: 0; width: 100%; }
  .coordonnees li { grid-template-columns: 5.625rem 1fr; font-size: 1.1875rem; }
  .faq { margin-top: 2.5rem; }
  .faq summary { grid-template-columns: 2.5rem 1fr 1.25rem; font-size: 1.25rem; }
  .point:not(.point-base) .point-etiquette { display: none; }
  .point-base .point-etiquette { padding: 0.375rem 0.625rem; }
  .faq details p { padding: 0 0 1.5rem 2.5rem; font-size: 1rem; }
  .menu-panneau { padding: 1.5rem 1.25rem 2.5rem; }
  .menu-groupes { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .menu-groupe a.menu-principal { font-size: 1.0625rem; }
  .menu-groupe a { font-size: 0.9375rem; }
  .pied-marque, .pied-col { padding-left: 0; }
  .pied-col { grid-column: span 6 !important; }
  .pied-grille { padding: 3rem 0.875rem 3.5rem; }
  .pied-bas, .pied-note { padding-left: 0.875rem; padding-right: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-oceanie { --portee: 70rem; transition: none; }
  .point { opacity: 1; transform: none; transition: none; }
  .point::after, .carte-sonar::before, .carte-sonar::after { animation: none; }
  html { scroll-behavior: auto; }
  .une { height: auto; }
  .une-epingle { position: relative; height: auto; min-height: 100vh; }
  .progression, .reperes, .trame-fondu { display: none; }
  .chargement .prechargeur { display: none; }
  .chargement { overflow: auto; }
  .mots .mot { opacity: 1; color: inherit; transition: none; }
  .revele img { clip-path: none; transition: none; }
  .revele::after { display: none; }
  .apparait { opacity: 1; transform: none; transition: none; }
}

/* le lien Accueil, en tête du menu latéral */
.menu-accueil { align-self: flex-start; font: 600 1.25rem/1.25 var(--sf); letter-spacing: -0.02em; color: var(--blanc); text-decoration: none; transition: color .2s; }
.menu-accueil:hover { color: var(--cuivre-clair); }
@media (max-width: 760px) { .menu-accueil { font-size: 1.0625rem; } }

/* Pictures in several sizes (scripts/images.mjs): the <picture> wrapper takes no room of its own, and a tiny blurred
   preview of the picture sits behind it until the real one has arrived. */
picture[data-r] { display: contents; }
picture[data-r] > source { display: none; } /* otherwise, in a grid or flex parent, each would take a (gap-sized) slot */
picture[data-r] > img { background: var(--apercu, none) center / cover no-repeat; }

/* ---------- Fonts, served from this site (site/fonts, latin characters only; SIL Open Font License) ----------
   Apple devices show their own system font (see --sf); the others get Inter. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* KYBOS — the interactive 3D demos (demos/*.js, blocks from contenu/demos3d.mjs). Each one is a scene with its
   canvas, the HTML tags that follow it, and a row of controls and notes underneath. */
.demo3d { display: grid; gap: 1rem; }
.demo3d-scene { position: relative; height: clamp(28rem, 72vh, 44rem); border-radius: var(--r-carte); overflow: hidden; border: 1px solid var(--bord); background: #090a0b; isolation: isolate; }
.demo3d-scene canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.demo3d-attente { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; font: 500 0.6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--attenue); transition: opacity .5s; pointer-events: none; }
.demo3d-attente::after { content: ''; display: block; width: 2.5rem; height: 1px; margin: 0.875rem auto 0; background: var(--cuivre); animation: demo3d-attente 1.4s ease-in-out infinite; }
@keyframes demo3d-attente { 50% { transform: scaleX(2.4); opacity: .4; } }
.demo3d-pret .demo3d-attente { opacity: 0; }
.demo3d-echec .demo3d-attente { opacity: 1; }
.demo3d-echec .demo3d-attente::before { content: '3D could not start on this device · '; }
.demo3d-echec .demo3d-attente::after { animation: none; }

.demo3d-lancer { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; }
.demo3d-lancer ~ .demo3d-attente, .demo3d-scene:has(.demo3d-lancer) .demo3d-attente { opacity: 0; }

/* tags that follow the 3D */
.demo3d-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.demo3d-tag { position: absolute; left: 0; top: 0; translate: -50% -135%; font: 500 0.6875rem/1.2 var(--mono); letter-spacing: .04em; color: #17120b; background: var(--cuivre-clair); padding: 0.3rem 0.55rem; border-radius: 999px; white-space: nowrap; opacity: 0; will-change: transform, opacity; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, .35); }
.demo3d-tag::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 0.5rem; background: var(--cuivre-clair); }
.demo3d-tag-info { color: var(--texte-doux); background: rgba(11, 11, 11, .9); border: 1px solid rgba(230, 174, 102, .6); border-radius: 0.75rem; padding: 0.55rem 0.75rem; line-height: 1.45; letter-spacing: .02em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.demo3d-tag-info::after { background: rgba(230, 174, 102, .6); }
.demo3d-tag-info b { color: var(--cuivre-clair); font-weight: 600; margin-right: 0.35rem; }
.demo3d-tag-info span { color: var(--attenue); }
.demo3d-tag-rue { color: rgba(240, 230, 220, .78); background: none; box-shadow: none; padding: 0; translate: -50% -50%; font-size: 0.5625rem; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 4px #000, 0 0 10px #000; }
.demo3d-tag-rue::after { display: none; }

/* things laid over the scene */
.demo3d-calque { position: absolute; z-index: 2; margin: 0; pointer-events: none; font: 500 0.6875rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--creme); background: rgba(11, 11, 11, .72); border: 1px solid var(--bord); border-radius: 999px; padding: 0.5rem 0.8rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.demo3d-indice { left: 1rem; top: 1rem; }
.demo3d-etape { left: 1rem; top: 1rem; display: flex; gap: 0.6rem; align-items: baseline; }
.demo3d-etape span { color: var(--attenue); }
.demo3d-etape b { font: 600 0.9375rem/1.2 var(--sf); letter-spacing: -0.01em; text-transform: none; color: var(--blanc); }
.demo3d-fin { position: absolute; z-index: 2; left: 50%; bottom: 1.25rem; translate: -50% 0; margin: 0; font: 500 0.9375rem/1.3 var(--sf); color: var(--blanc); background: rgba(11, 11, 11, .8); border: 1px solid var(--cuivre); border-radius: 999px; padding: 0.7rem 1.1rem; white-space: nowrap; animation: demo3d-monte .6s cubic-bezier(.2, .7, .1, 1); }
@keyframes demo3d-monte { from { opacity: 0; transform: translateY(0.75rem); } }
.demo3d-date { top: 1rem; }
.demo3d-date-a { left: 1rem; }
.demo3d-date-b { right: 1rem; color: var(--cuivre-clair); }
.demo3d-poignee { position: absolute; z-index: 2; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; translate: -50% -50%; border-radius: 50%; background: rgba(11, 11, 11, .78); border: 1px solid var(--cuivre-clair); pointer-events: none; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .45); }
.demo3d-poignee::before, .demo3d-poignee::after { content: ''; position: absolute; top: 50%; width: 0.4rem; height: 0.4rem; border: solid var(--cuivre-clair); border-width: 0 0 1.5px 1.5px; }
.demo3d-poignee::before { left: 0.75rem; transform: translateY(-50%) rotate(45deg); }
.demo3d-poignee::after { right: 0.75rem; transform: translateY(-50%) rotate(-135deg); }
.demo3d-chiffres { right: 1rem; top: 1rem; display: grid; grid-template-columns: repeat(2, auto); gap: 0.5rem 1.25rem; border-radius: 1rem; padding: 0.875rem 1rem; text-transform: none; letter-spacing: 0; }
.demo3d-chiffres div { display: grid; gap: 0.15rem; }
.demo3d-chiffres dt { font: 500 0.625rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--attenue); }
.demo3d-chiffres dd { margin: 0; font: 600 1.0625rem/1.15 var(--sf); letter-spacing: -0.01em; color: var(--blanc); font-variant-numeric: tabular-nums; }

/* the row under the scene */
.demo3d-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.demo3d-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.demo3d-note, .demo3d-astuce { margin: 0; font: 400 0.8125rem/1.45 var(--sf); color: var(--attenue); max-width: 62ch; }
.demo3d-astuce { font: 500 0.75rem/1.4 var(--mono); letter-spacing: .05em; }
.demo3d-legende { margin: 0; min-height: 3em; font: 400 1rem/1.5 var(--sf); color: var(--texte-doux); max-width: 62ch; }
.demo3d-bouton { font: 500 0.875rem/1 var(--sf); letter-spacing: -0.01em; color: var(--creme); background: rgba(255, 255, 255, .04); border: 1px solid var(--trait-fort); border-radius: 999px; padding: 0.7rem 1.05rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.demo3d-bouton:hover { border-color: var(--cuivre); }
.demo3d-bouton:focus-visible, .demo3d input[type="range"]:focus-visible { outline: 2px solid var(--cuivre-clair); outline-offset: 2px; }
.demo3d-bouton[aria-pressed="true"] { background: var(--degrade-cuivre); color: #0b0b0b; border-color: transparent; }
.demo3d-compte { font: 500 0.875rem/1 var(--mono); color: var(--creme); margin-right: 0.5rem; font-variant-numeric: tabular-nums; }
.demo3d-compte b { color: var(--cuivre-clair); font-weight: 500; }
.demo3d-cle { display: inline-flex; align-items: center; gap: 0.4rem; font: 500 0.75rem/1 var(--mono); color: var(--attenue); margin-left: 0.5rem; }
.demo3d-cle i { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; }
.demo3d-cle .haut { background: #f29e4c; }
.demo3d-cle .bas { background: #73b3f2; }
.demo3d input[type="range"] { accent-color: var(--cuivre); width: 100%; cursor: pointer; }
.demo3d-curseur { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 0.4rem 1rem; min-width: 12rem; font: 500 0.75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--attenue); }
.demo3d-curseur output { color: var(--creme); font-variant-numeric: tabular-nums; }
.demo3d-curseur input { grid-column: 1 / -1; }
.demo3d-curseur-large { flex: 1 1 18rem; grid-template-columns: 1fr; }
.demo3d-reglages { justify-content: flex-start; gap: 1rem 2rem; }

/* building the house: the slider and the five capture windows on it */
.demo3d-construire { flex-wrap: nowrap; align-items: start; gap: 1.25rem; }
.demo3d-construire .demo3d-bouton { flex: none; min-width: 6.5rem; }
.demo3d-glissiere { position: relative; flex: 1; padding-top: 0.6rem; }
.demo3d-fenetres { position: relative; height: 2.25rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.demo3d-fenetres li { position: absolute; left: calc(var(--at, 0) * 100%); top: 0; translate: -50% 0; display: grid; justify-items: center; gap: 0.35rem; font: 500 0.625rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--attenue); white-space: nowrap; transition: color .3s; }
.demo3d-fenetres li::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--cuivre); background: #0b0b0b; transition: background .3s, box-shadow .3s; }
.demo3d-fenetres li.garde { color: var(--cuivre-clair); }
.demo3d-fenetres li.garde::before { background: var(--cuivre-clair); box-shadow: 0 0 0 4px rgba(230, 174, 102, .18); }
.demo3d-fenetres li:first-child { translate: -0.3rem 0; justify-items: start; }
.demo3d-fenetres li:last-child { translate: calc(-100% + 0.3rem) 0; justify-items: end; }

/* mouse or touch: the instructions follow the device */
.d3-doigt { display: none; }
@media (pointer: coarse) { .d3-souris { display: none; } .d3-doigt { display: inline; } }

/* ---------- home page: the Site Atlas tabletop and the Site Pass ---------- */
.atlas-table, .pass-bloc { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 2.5rem; margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--trait); }
.atlas-table { grid-row: 5; }
.pass-bloc { grid-row: 5; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.atlas-table-texte, .pass-texte { display: grid; gap: 1rem; align-content: center; max-width: 30rem; }
.atlas-table-lib, .pass-lib { font: 500 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--cuivre-clair); }
.atlas-table-titre, .pass-titre { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.026em; color: var(--blanc); }
.atlas-table-titre .attenue, .pass-titre .attenue { display: block; }
.atlas-table-texte > p:not(.atlas-table-lib), .pass-intro { font: 400 1.0625rem/1.5 var(--sf); color: var(--texte-doux); }
.pass-astuce { font: 500 0.75rem/1.4 var(--mono); letter-spacing: .06em; color: var(--attenue); }
.atlas-table .demo3d-scene { height: clamp(30rem, 70vh, 42rem); }
.stades { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0; padding: 0; list-style: none; }
.stades li { display: inline-flex; align-items: center; gap: 0.4rem; font: 500 0.6875rem/1 var(--mono); letter-spacing: .06em; color: var(--attenue); }
.stades li::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 0.15rem; background: var(--teinte); }
.fiche-lot { position: absolute; z-index: 3; left: 1rem; bottom: 1rem; width: min(19rem, calc(100% - 2rem)); display: grid; gap: 0.5rem; padding: 1.1rem 1.2rem; border-radius: 1.1rem; background: rgba(11, 11, 11, .86); border: 1px solid var(--bord); border-top: 3px solid var(--teinte, var(--cuivre)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: demo3d-monte .5s cubic-bezier(.2, .7, .1, 1); }
.fiche-lot[hidden] { display: none; }
.fiche-lot b { font: 600 1.5rem/1.1 var(--sf); letter-spacing: -0.02em; color: var(--blanc); }
.fiche-lot dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0; font: 400 0.875rem/1.3 var(--sf); }
.fiche-lot dt { color: var(--attenue); }
.fiche-lot dd { margin: 0; color: var(--creme); }
.fiche-lot a { font: 500 0.875rem/1.2 var(--sf); color: var(--cuivre-clair); text-decoration: none; }
.fiche-lot a:hover { text-decoration: underline; }
.fiche-lot button { position: absolute; right: 0.6rem; top: 0.6rem; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--bord); background: none; color: var(--attenue); cursor: pointer; font: 400 1rem/1 var(--sf); }
.fiche-lot button:hover { color: var(--blanc); border-color: var(--cuivre); }
.atlas-table-recentrer { position: absolute; z-index: 2; right: 1rem; top: 1rem; }
.pass-scene { position: relative; height: clamp(34rem, 72vh, 44rem); }
.pass-scene canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.pass-image { display: block; height: 100%; margin: 0 auto; border-radius: 1rem; }
/* narrower screens stack the dossier section (styles.css: frise row 4, table row 5, uses row 6): the pass goes last */
@media (max-width: 1100px) {
  .pass-bloc { grid-row: 7; }
  .atlas-table, .pass-bloc { grid-template-columns: 1fr; gap: 1.25rem; }
  .atlas-table-texte, .pass-texte { max-width: 40rem; }
}
@media (max-width: 760px) {
  .demo3d-scene { height: 30rem; border-radius: 1.25rem; }
  .atlas-table .demo3d-scene { height: 32rem; }
  .atlas-table, .pass-bloc { margin-top: 3.5rem; padding-top: 2rem; }
  .pass-scene { height: 32rem; }
  .demo3d-chiffres { left: 0.75rem; right: 0.75rem; top: 0.75rem; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0.5rem 0.75rem; padding: 0.7rem 0.85rem; }
  .demo3d-chiffres dd { font-size: 0.9375rem; }
  .demo3d-construire { flex-direction: column; align-items: stretch; }
  .demo3d-fenetres li { font-size: 0; gap: 0; }
  .demo3d-fenetres li.garde { font-size: 0; }
  .demo3d-fin { white-space: normal; width: calc(100% - 2rem); text-align: center; border-radius: 1rem; }
  .demo3d-curseur { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .demo3d-attente::after, .demo3d-fin, .fiche-lot { animation: none; } }