/* HangarOS · la visite du Pavillon (maquette)
   Palette : Chaux F3F1ED, Béton CFCAC2, Ombre 4E5963, Encre 1D2226 ; marque HangarOS : bleu nuit 182D4C
   (le monogramme), sa version vive 2A4D80 pour les halos, sa version claire A8C0E4 sur fond sombre.
   Typo : Schibsted Grotesk (titres et texte), Geist Mono (heures, relevés). */
:root {
  --chaux: #f3f1ed;
  --beton: #cfcac2;
  --ombre: #4e5963;
  --marque: #182d4c;
  --marque-vif: #2a4d80;
  --marque-clair: #a8c0e4;
  --encre: #1d2226;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --marge: clamp(16px, 3.4vw, 48px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--chaux);
  color: var(--encre);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ----------------------------------------------------------------- barre du haut */
.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--marge);
  color: var(--encre);
  transition: color .6s ease;
}
.barre.sombre { color: var(--chaux); }
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 19px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; color: var(--marque);
  transition: opacity .5s ease, color .6s ease;
}
.marque img { width: 30px; height: auto; display: block; }
.marque .clair { display: none; }
.barre.sombre .marque { color: var(--chaux); }
.barre.sombre .marque .fonce { display: none; }
.barre.sombre .marque .clair { display: block; }
/* pendant l'accueil, le grand logo tient lieu de marque : celle du bandeau attend */
.barre.en-accueil .marque, .barre.en-accueil .horloge { opacity: 0; pointer-events: none; }
.barre .marque { max-width: 220px; overflow: hidden; transition: opacity .5s ease, color .6s ease, max-width .5s ease, margin .5s ease; }
.barre.en-accueil .marque { max-width: 0; margin-right: -18px; }   /* le grand logo tient lieu de marque : le menu vient contre la marge */
.horloge {
  margin: 0; font: 400 12px/1 var(--mono); letter-spacing: .05em; color: var(--ombre);
  font-variant-numeric: tabular-nums; transition: color .6s ease;
}
.barre.sombre .horloge { color: var(--beton); }
.demo {
  font: 500 14px/1 var(--sans); text-decoration: none; white-space: nowrap;
  padding: 11px 16px; border-radius: 2px;
  background: var(--marque); color: var(--chaux);
  transition: background .2s ease, color .6s ease;
}
.demo:hover { background: var(--marque-vif); }
.barre.sombre .demo { background: var(--chaux); color: var(--marque); }
.demo-court { display: none; }
.barre.sombre .demo:hover { background: var(--marque-clair); color: var(--marque); }

/* ----------------------------------------------------------------- le menu
   Solutions et Fonctionnalités s'ouvrent en panneaux de vignettes sous le bandeau (au survol, au clic, au clavier).
   Sur l'accueil, le menu flotte sur le hangar dans une pastille de verre ; au crépuscule, il passe au verre fumé. */
.barre-gauche, .barre-droite { display: flex; align-items: center; gap: 18px; }
.barre .horloge { position: absolute; left: 50%; transform: translateX(-50%); }
.menu-racine { display: flex; align-items: center; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; }
/* pas de backdrop-filter ici : il ferait de la pastille le cadre des panneaux, qui s'y retrouveraient coincés */
.barre:not(.barre-pages) .menu-racine {
  background: rgba(246, 244, 240, .82); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 24px -14px rgba(29, 34, 38, .35); transition: background .6s ease, border-color .6s ease;
}
.barre.sombre:not(.barre-pages) .menu-racine { background: rgba(29, 34, 38, .62); border-color: rgba(255, 255, 255, .12); }
.menu-bouton, .menu-lien {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; font: 500 14px/1 var(--sans); color: var(--marque); text-decoration: none; transition: background .2s ease, color .6s ease;
}
.menu-bouton svg { width: 12px; height: 12px; transition: transform .2s ease; }
.menu-bouton:hover, .menu-lien:hover, .menu-groupe.ouvert .menu-bouton { background: rgba(24, 45, 76, .08); }
.menu-groupe.ouvert .menu-bouton svg { transform: rotate(180deg); }
.menu-lien[aria-current="page"] { color: var(--marque-vif); }
.barre.sombre .menu-bouton, .barre.sombre .menu-lien { color: var(--chaux); }
.barre.sombre .menu-bouton:hover, .barre.sombre .menu-lien:hover, .barre.sombre .menu-groupe.ouvert .menu-bouton { background: rgba(255, 255, 255, .1); }
.menu-bouton:focus-visible, .menu-lien:focus-visible, .vignette:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 2px; }
.menu-panneau {
  position: absolute; top: calc(100% - 4px); left: var(--marge); z-index: 30;
  width: min(940px, calc(100% - 2 * var(--marge))); padding: 20px 20px 22px; border-radius: 20px;
  background: rgba(251, 250, 248, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(78, 89, 99, .12); box-shadow: 0 30px 80px -30px rgba(29, 34, 38, .45);
  color: var(--encre); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.menu-panneau::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* passerelle du survol, sous les boutons */
.menu-panneau.menu-fonctionnalites { width: min(780px, calc(100% - 2 * var(--marge))); }
.menu-groupe:hover .menu-panneau, .menu-groupe.ouvert .menu-panneau, html:not(.menu-js) .menu-groupe:focus-within .menu-panneau {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.menu-chapeau { margin: 0 0 14px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre); }
.menu-vignettes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.menu-fonctionnalites .menu-vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vignette { display: grid; gap: 4px; align-content: start; padding: 6px 6px 10px; border-radius: 14px; text-decoration: none; color: inherit; transition: background .2s ease; }
.vignette:hover, .vignette[aria-current="page"] { background: rgba(24, 45, 76, .06); }
.vignette img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 6px; background: var(--beton); }
.vignette b { font: 600 15px/1.25 var(--sans); color: var(--marque); }
.vignette span { font-size: 13px; line-height: 1.45; color: #4a545d; }

.menu-mobile { display: none; }
.menu-mobile summary {
  list-style: none; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--marque);
  padding: 10px 12px; border: 1px solid rgba(24, 45, 76, .25); border-radius: 8px; background: rgba(243, 241, 237, .6);
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile .fermer, .menu-mobile[open] .ouvrir { display: none; }
.menu-mobile[open] .fermer { display: inline; }
.barre.sombre .menu-mobile summary { color: var(--chaux); border-color: rgba(255, 255, 255, .3); background: rgba(29, 34, 38, .4); }
.menu-mobile-panneau {
  position: fixed; inset: 0; z-index: -1; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(84px + env(safe-area-inset-top)) var(--marge) calc(32px + env(safe-area-inset-bottom));
  background: var(--chaux);
}
.menu-mobile-liste { display: grid; gap: 8px; margin-bottom: 26px; }
.vignette-ligne { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 6px; border-radius: 12px; text-decoration: none; color: inherit; }
.vignette-ligne[aria-current="page"] { background: rgba(24, 45, 76, .06); }
.vignette-ligne img { width: 96px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--beton); }
.vignette-ligne span { font-size: 13px; line-height: 1.4; color: #4a545d; }
.vignette-ligne b { display: block; margin-bottom: 2px; font: 600 16px/1.2 var(--sans); color: var(--marque); }
.menu-mobile-visite { display: inline-block; font: 500 15px/1.3 var(--sans); color: var(--marque); text-underline-offset: 4px; }
/* menu ouvert : le bandeau passe en clair par-dessus, la page ne défile plus */
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }
.barre:has(.menu-mobile[open]) { color: var(--encre); background: var(--chaux); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* sinon le flou enferme le panneau fixe dans le bandeau */
.barre:has(.menu-mobile[open]) .marque { color: var(--marque); opacity: 1; }
.barre:has(.menu-mobile[open]) .marque .fonce { display: block; }
.barre:has(.menu-mobile[open]) .marque .clair { display: none; }
.barre:has(.menu-mobile[open]) .menu-mobile summary { color: var(--marque); border-color: rgba(24, 45, 76, .25); background: none; }

/* ----------------------------------------------------------------- la visite */
.visite { position: relative; }          /* hauteur posée par visite.js */
.scene {
  /* la grande hauteur (100lvh) : sur iPhone, la scène passe sous la barre de Safari repliée au lieu de laisser
     une bande vide en bas ; les cartes, elles, suivent la partie visible (--cache-bas) */
  --cache-bas: 0px;
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
  background: var(--beton);
}
@supports (height: 100dvh) { .scene { --cache-bas: calc(100lvh - 100dvh); } }
#toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.voile { position: absolute; inset: 0; pointer-events: none; }   /* la carte porte la lisibilité ; voile du soir seul */
.voile::after {                          /* voile du soir : même dessin, en encre */
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  background:
    radial-gradient(ellipse 60% 64% at 0% 100%, rgba(29, 34, 38, .85) 0%, rgba(29, 34, 38, .5) 45%, rgba(29, 34, 38, 0) 100%);
}
.scene.sombre .voile { background: none; }
.scene.sombre .voile::after { opacity: 1; }

.textes { position: absolute; inset: 0; pointer-events: none; }

/* La carte de chaque arrêt, façon instrument de bord : verre dépoli, heure en afficheur, jauge graduée qui avance
   avec le scroll. --v (0 → 1) fait entrer la carte puis son contenu, --p (0 → 1) est l'avancée dans l'arrêt. */
.panneau {
  --a: clamp(0, calc(var(--v, 0) * 2.2 - .2), 1);
  position: absolute; left: var(--marge); bottom: calc(clamp(36px, 8vh, 96px) + var(--cache-bas));
  width: min(480px, calc(100% - 2 * var(--marge)));
  padding: 22px 26px 34px; border-radius: 18px;
  color: var(--encre);
  background: linear-gradient(140deg, rgba(255, 255, 255, .7) 0%, rgba(243, 241, 237, .5) 55%, rgba(243, 241, 237, .4) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 6px rgba(29, 34, 38, .06), 0 32px 80px -26px rgba(29, 34, 38, .42);
  opacity: var(--a);
  transform: translateY(calc((1 - var(--a)) * 28px)) scale(calc(.965 + var(--a) * .035));
  transform-origin: 0 100%;
  will-change: opacity, transform;
}
.panneau .repere {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px;
  font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre);
  font-variant-numeric: tabular-nums;
  opacity: clamp(0, calc(var(--v, 0) * 2.4 - .5), 1);
}
.panneau .repere b { order: 0; font: 300 clamp(34px, 3vw, 44px)/.9 var(--mono); letter-spacing: -.04em; color: var(--encre); text-transform: none; }
.panneau .sep { display: none; }
.panneau .nom { order: 1; display: inline-flex; align-items: center; gap: 8px; }
.panneau .nom::before {                  /* voyant */
  content: ""; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-1px);
  background: var(--marque-vif); box-shadow: 0 0 0 3px rgba(42, 77, 128, .16), 0 0 10px rgba(42, 77, 128, .5);
}
.panneau .num { order: 2; margin-left: auto; color: var(--marque); }   /* compteur à droite */
.panneau .num small { font-size: inherit; opacity: .55; }
.panneau h2 {
  margin: 0 0 10px; font: 500 clamp(26px, 2.4vw, 36px)/1.06 var(--sans); letter-spacing: -.032em; text-wrap: balance;
}
.panneau .mot, .panneau .point {         /* le titre se compose mot à mot */
  display: inline-block;
  --w: clamp(0, calc(var(--v, 0) * 3.2 - var(--i, 6) * .22 - .55), 1);
  opacity: var(--w); transform: translateY(calc((1 - var(--w)) * .5em));
}
.panneau p.texte {
  margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ombre); max-width: 42ch;
  opacity: clamp(0, calc(var(--v, 0) * 2.6 - 1.1), 1);
}
.panneau .suite {                        /* vers la page qui détaille le lieu */
  display: inline-block; margin-top: 12px; font: 500 14px/1.3 var(--sans); color: var(--marque);
  text-decoration: underline; text-decoration-color: rgba(24, 45, 76, .3); text-underline-offset: 4px;
  opacity: clamp(0, calc(var(--v, 0) * 2.6 - 1.4), 1);
}
.panneau .suite:hover { text-decoration-color: var(--marque); }
.panneau.actif .suite { pointer-events: auto; }
.scene.sombre .panneau .suite { color: var(--marque-clair); text-decoration-color: rgba(168, 192, 228, .4); }
.panneau .jauge {                        /* échelle graduée, curseur et trait orange */
  position: absolute; left: 26px; right: 26px; bottom: 15px; height: 7px; display: block;
  background:
    repeating-linear-gradient(90deg, rgba(78, 89, 99, .38) 0 1px, transparent 1px 10%) 0 0 / 100% 4px no-repeat,
    linear-gradient(rgba(78, 89, 99, .16), rgba(78, 89, 99, .16)) 0 100% / 100% 2px no-repeat;
  opacity: clamp(0, calc(var(--v, 0) * 2.4 - 1.2), 1);
}
.panneau .jauge::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(42, 77, 128, .35), var(--marque));
  box-shadow: 0 0 10px rgba(42, 77, 128, .4);
}
.panneau .jauge b {
  position: absolute; bottom: -3px; left: calc(var(--p, 0) * 100%); width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--marque); box-shadow: 0 0 0 3px rgba(42, 77, 128, .18), 0 0 12px rgba(42, 77, 128, .55);
}
/* au crépuscule : verre fumé */
.scene.sombre .panneau {
  color: var(--chaux);
  background: linear-gradient(140deg, rgba(29, 34, 38, .66) 0%, rgba(29, 34, 38, .46) 100%);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 32px 80px -26px rgba(0, 0, 0, .6);
}
.scene.sombre .panneau .repere, .scene.sombre .panneau p.texte { color: var(--beton); }
.scene.sombre .panneau .repere b { color: var(--chaux); }
.scene.sombre .panneau .num { color: var(--marque-clair); }
.scene.sombre .panneau .nom::before, .scene.sombre .panneau .jauge b {
  background: var(--marque-clair); box-shadow: 0 0 0 3px rgba(168, 192, 228, .18), 0 0 10px rgba(168, 192, 228, .55);
}
.scene.sombre .panneau .jauge::after { background: linear-gradient(90deg, rgba(168, 192, 228, .35), var(--marque-clair)); box-shadow: 0 0 10px rgba(168, 192, 228, .4); }
.scene.sombre .panneau .jauge {
  background:
    repeating-linear-gradient(90deg, rgba(207, 202, 194, .35) 0 1px, transparent 1px 10%) 0 0 / 100% 4px no-repeat,
    linear-gradient(rgba(207, 202, 194, .18), rgba(207, 202, 194, .18)) 0 100% / 100% 2px no-repeat;
}

/* ----------------------------------------------------------------- l'accueil, avant d'entrer dans l'atelier
   --intro va de 1 (arrivée) à 0 (on est entré) avec les premiers écrans de scroll. */
.accueil {
  position: absolute; inset: 0 0 var(--cache-bas) 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, rgba(243, 241, 237, .9) 0%, rgba(243, 241, 237, .72) 50%, rgba(243, 241, 237, .35) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  opacity: var(--intro, 1);
}
.accueil-contenu {
  display: grid; justify-items: center; text-align: center; padding: 0 var(--marge);
  transform: translateY(calc((1 - var(--intro, 1)) * -48px)) scale(calc(.94 + var(--intro, 1) * .06));
}
.accueil-logo { width: clamp(96px, 12vw, 168px); height: auto; margin-bottom: 22px; animation: accueil-entree 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.accueil-marque {
  margin: 0; font: 700 clamp(56px, 9vw, 132px)/.9 var(--sans); letter-spacing: -.05em; color: var(--marque);
  animation: accueil-entree 1.1s .12s cubic-bezier(.2, .8, .2, 1) both;
}
.accueil-baseline {
  margin: 18px 0 0; max-width: 30ch; font: 400 clamp(17px, 1.6vw, 22px)/1.4 var(--sans); color: #2d353c;
  animation: accueil-entree 1.1s .24s cubic-bezier(.2, .8, .2, 1) both;
}
.accueil-defiler {
  position: absolute; left: 50%; bottom: clamp(24px, 5vh, 48px); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px;
  font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ombre);
  animation: accueil-entree 1.1s .6s cubic-bezier(.2, .8, .2, 1) both;
}
.accueil-defiler i { display: block; width: 1px; height: 44px; background: linear-gradient(var(--marque), transparent); transform-origin: top; animation: defiler 1.8s ease-in-out infinite; }
@keyframes accueil-entree { from { opacity: 0; transform: translateY(16px); } }
/* l'attente : l'accueil retient le visiteur le temps que le début de la balade soit chargé en pleine qualité */
html.visite-en-charge, html.visite-en-charge body { overflow: hidden; }
.accueil-attente {
  position: absolute; left: 50%; bottom: clamp(24px, 5vh, 48px); transform: translateX(-50%);
  display: none; justify-items: center; gap: 12px;
  font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ombre);
}
.visite-en-charge .accueil-attente { display: grid; animation: accueil-apparait 1.1s .6s cubic-bezier(.2, .8, .2, 1) both; }
.visite-en-charge .accueil-defiler { visibility: hidden; }
.accueil-attente b { font-weight: 500; letter-spacing: .06em; color: var(--marque); font-variant-numeric: tabular-nums; }
.accueil-attente i { position: relative; display: block; width: 160px; height: 2px; overflow: hidden; background: rgba(24, 45, 76, .14); }
.accueil-attente i::after {
  content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--avance, 0));
  background: var(--marque); transition: transform .3s ease;
}
.accueil.prete .accueil-defiler { animation: accueil-apparait .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes accueil-apparait { from { opacity: 0; transform: translate(-50%, 12px); } to { transform: translate(-50%, 0); } }
@keyframes defiler { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.scene.entree .rail { opacity: 0; pointer-events: none; }
.rail { transition: opacity .5s ease; }

/* rail des lieux, à droite */
.rail {
  position: absolute; right: var(--marge); top: 50%; transform: translateY(-50%);
  display: grid; gap: 10px; justify-items: end;
}
.rail button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--ombre);
}
.rail button span { opacity: 0; transform: translateX(6px); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
.rail button i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid currentColor; transition: background .2s ease, transform .2s ease;
}
.rail button[aria-current="step"] { color: var(--marque); }
.rail button[aria-current="step"] i { background: currentColor; transform: scale(1.25); }
.rail button[aria-current="step"] span,
.rail:hover button span,
.rail button:focus-visible span { opacity: 1; transform: none; }
.rail button:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 4px; }
.scene.sombre .rail button { color: var(--beton); }
.scene.sombre .rail button[aria-current="step"] { color: var(--marque-clair); }

/* chargement de la séquence */
.charge { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.charge span { display: block; height: 100%; width: 0; background: var(--marque); transition: width .2s linear, opacity .6s ease; }
.charge.fini span { opacity: 0; }

/* ----------------------------------------------------------------- la fin */
.fin { background: var(--marque); color: var(--chaux); padding: clamp(72px, 14vh, 160px) var(--marge) 32px; }
.fin-grille {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end;
  max-width: 1240px; margin: 0 auto;
}
.sur-titre { margin: 0 0 18px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--beton); }
.fin h2 { margin: 0 0 18px; font: 500 clamp(34px, 5vw, 64px)/1 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.fin-texte { margin: 0; max-width: 46ch; color: var(--beton); font-size: 17px; }
.fin-action { display: grid; gap: 14px; justify-items: start; }
.bouton {
  font: 500 16px/1 var(--sans); text-decoration: none; padding: 16px 22px; border-radius: 2px;
  background: var(--chaux); color: var(--marque); transition: background .2s ease;
}
.bouton:hover { background: var(--marque-clair); }
.bouton:focus-visible, .demo:focus-visible, .marque:focus-visible { outline: 2px solid var(--marque-clair); outline-offset: 3px; }
.fin-note { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--beton); }
.fin-note a { color: var(--chaux); text-decoration-color: var(--marque-clair); text-underline-offset: 3px; }
.pied {
  max-width: 1240px; margin: clamp(64px, 12vh, 120px) auto 0; padding-top: 28px;
  border-top: 1px solid rgba(207, 202, 194, .25);
  font: 400 13px/1.5 var(--sans); color: var(--beton);
}
.pied-plan { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.pied-plan > div p { margin: 0 0 8px; max-width: 34ch; }
.pied-plan nav { display: grid; gap: 8px; align-content: start; }
.pied-titre { margin: 0 0 6px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pied a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; justify-self: start; }
.pied a:hover { color: var(--chaux); border-bottom-color: var(--marque-clair); }

/* ----------------------------------------------------------------- demande de démo (même verre que les cartes) */
html:has(dialog[open]) { overflow: hidden; }
dialog.demande {
  width: min(460px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0;
  background: transparent; color: var(--encre); overflow: visible;
}
dialog.demande::backdrop { background: rgba(29, 34, 38, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.demande[open] { animation: demande-entree .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes demande-entree { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.demande-carte {
  position: relative; padding: 26px 28px 22px; border-radius: 20px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .94) 0%, rgba(243, 241, 237, .9) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 40px 100px -30px rgba(29, 34, 38, .55);
}
.demande .fermer {
  all: unset; cursor: pointer; position: absolute; top: 14px; right: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%; font: 400 22px/1 var(--sans); color: var(--ombre);
}
.demande .fermer:hover { background: rgba(78, 89, 99, .1); color: var(--encre); }
.demande .fermer:focus-visible { outline: 2px solid var(--marque-vif); }
.repere-demande {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre);
}
.voyant {
  width: 6px; height: 6px; border-radius: 50%; background: var(--marque-vif);
  box-shadow: 0 0 0 3px rgba(42, 77, 128, .16), 0 0 10px rgba(42, 77, 128, .5);
}
.demande h2 { margin: 0 0 8px; font: 500 clamp(24px, 3vw, 30px)/1.08 var(--sans); letter-spacing: -.032em; }
.demande .chapeau { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ombre); }
.champ { display: grid; gap: 6px; margin-bottom: 12px; }
.champ label { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ombre); }
.champ input {
  font: 400 16px/1.2 var(--sans); color: var(--encre); padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(78, 89, 99, .22); background: rgba(255, 255, 255, .85);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.champ input:focus { outline: none; border-color: var(--marque-vif); box-shadow: 0 0 0 3px rgba(42, 77, 128, .16); }
.erreur { margin: 0; font-size: 13px; color: #a3321f; }
.erreur:empty { display: none; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#anti-robot { margin: 4px 0 12px; }
#anti-robot:empty { display: none; }
.demande button[type=submit] {
  width: 100%; margin-top: 6px; font: 500 16px/1 var(--sans); padding: 16px 18px; border: 0; border-radius: 10px;
  background: var(--marque); color: var(--chaux); cursor: pointer; transition: background .2s ease, color .2s ease;
}
.demande button[type=submit]:hover { background: var(--marque-vif); }
.demande button[type=submit]:disabled { opacity: .6; cursor: progress; }
.demande button[type=submit]:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 3px; }
.statut { margin: 10px 0 0; font-size: 14px; }
.statut:empty { display: none; }
.statut.echec { color: #a3321f; }
.demande .mention { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--ombre); }
.demande .mention a { color: inherit; }
.merci { display: none; padding: 4px 0 6px; }
.demande form.envoye .champs { display: none; }
.demande form.envoye .merci { display: block; }

/* le plan du site en fin de visite : à qui s'adresse HangarOS, ce qu'il fait */
.fin-plan { display: grid; gap: clamp(36px, 6vh, 56px); max-width: 1240px; margin: clamp(64px, 12vh, 128px) auto 0; }
.fin .fin-plan-titre { margin: 0 0 16px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--marque-clair); }
.fin-liens { display: grid; gap: 14px; }
.fin-liens.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fin-liens.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-lien {
  display: grid; gap: 6px; align-content: start; padding: 10px 10px 18px; border-radius: 16px; text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(168, 192, 228, .18);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fin-lien:hover { background: rgba(255, 255, 255, .09); border-color: var(--marque-clair); transform: translateY(-2px); }
.fin-lien img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.fin-lien b { padding: 0 6px; font: 500 17px/1.25 var(--sans); color: var(--chaux); }
.fin-lien span { padding: 0 6px; font-size: 14px; line-height: 1.5; color: var(--beton); }

/* ----------------------------------------------------------------- pages légales */
.page-texte { background: var(--chaux); }
.page-texte .barre { position: sticky; background: rgba(243, 241, 237, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.page-texte .marque { color: var(--encre); }
.texte-legal { max-width: 720px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--marge) 80px; }
.texte-legal .sur-titre { color: var(--marque-vif); }
.texte-legal h1 { margin: 0 0 12px; font: 500 clamp(34px, 5vw, 56px)/1 var(--sans); letter-spacing: -.035em; }
.texte-legal .maj { margin: 0 0 40px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--ombre); }
.texte-legal h2 { margin: 40px 0 12px; font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; }
.texte-legal p, .texte-legal li { font-size: 16px; line-height: 1.65; color: #2d353c; }
.texte-legal ul { padding-left: 1.2em; }
.texte-legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.texte-legal dt { font: 400 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ombre); }
.texte-legal dd { margin: 0; font-size: 16px; line-height: 1.6; }
.texte-legal a { color: var(--encre); text-decoration-color: var(--marque-vif); text-underline-offset: 3px; }
.page-texte .pied, .page-contenu .pied {
  max-width: 1160px; margin: 0 auto; padding: 32px var(--marge) 40px; color: var(--ombre); border-top-color: rgba(78, 89, 99, .18);
}
.page-texte .pied a:hover, .page-contenu .pied a:hover { color: var(--marque); border-bottom-color: var(--marque-vif); }

/* ----------------------------------------------------------------- pages métier et fonction */
.page-contenu { background: var(--chaux); }
.barre-pages { position: sticky; background: rgba(243, 241, 237, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(78, 89, 99, .1); }

.page-contenu main { max-width: 1160px; margin: 0 auto; padding: 0 var(--marge); }
.page-tete { padding: clamp(40px, 9vh, 104px) 0 clamp(40px, 7vh, 80px); }
.ariane { display: flex; gap: 10px; margin-bottom: 28px; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ombre); }
.ariane a { color: inherit; text-decoration: none; }
.ariane a:hover { color: var(--marque); }
.page-tete h1 { margin: 0 0 22px; max-width: 20ch; font: 500 clamp(38px, 5.4vw, 72px)/1.02 var(--sans); letter-spacing: -.04em; color: var(--encre); text-wrap: balance; }
.page-chapeau { margin: 0; max-width: 60ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: #3b454e; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.bouton-plein {
  font: 500 16px/1 var(--sans); text-decoration: none; padding: 16px 22px; border-radius: 10px;
  background: var(--marque); color: var(--chaux); transition: background .2s ease;
}
.bouton-plein:hover { background: var(--marque-vif); }
.bouton-lien { font: 500 15px/1 var(--sans); color: var(--marque); text-decoration: underline; text-decoration-color: rgba(24, 45, 76, .3); text-underline-offset: 4px; }
.bouton-lien:hover { text-decoration-color: var(--marque); }

.bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 7vh, 88px) 0; border-top: 1px solid rgba(78, 89, 99, .12); }
.bloc.inverse > .bloc-texte { order: 2; }
.bloc-texte h2 { margin: 0 0 16px; font: 500 clamp(26px, 2.8vw, 38px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--encre); text-wrap: balance; }
.bloc-texte p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: #3b454e; }
.bloc-texte ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bloc-texte li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; color: #2d353c; }
.bloc-texte li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--marque-vif); box-shadow: 0 0 0 3px rgba(42, 77, 128, .14); }
.bloc-texte a { color: var(--marque); text-underline-offset: 3px; }

.capture { margin: 0; border-radius: 14px; overflow: hidden; background: #0f1419; box-shadow: 0 30px 80px -30px rgba(29, 34, 38, .55), 0 0 0 1px rgba(29, 34, 38, .08); }
.capture-cadre { display: flex; gap: 6px; padding: 10px 12px; background: #1b2128; }
.capture-cadre i { width: 9px; height: 9px; border-radius: 50%; background: #3a434d; }
.capture img { display: block; width: 100%; height: auto; }
.capture figcaption { padding: 10px 14px; font: 400 12px/1.4 var(--mono); color: #aab4bd; background: #1b2128; }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; padding: clamp(32px, 6vh, 72px) 0; border-top: 1px solid rgba(78, 89, 99, .12); }
.cartes > h2 { grid-column: 1 / -1; margin: 0 0 8px; font: 500 clamp(26px, 2.8vw, 38px)/1.1 var(--sans); letter-spacing: -.03em; }
.carte {
  padding: 22px 22px 20px; border-radius: 16px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55));
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(29, 34, 38, .35);
}
.carte h3 { margin: 0 0 8px; font: 500 18px/1.25 var(--sans); letter-spacing: -.015em; color: var(--encre); }
.carte p { margin: 0; font-size: 15px; line-height: 1.55; color: #4a545d; }

.faq { max-width: 820px; padding: clamp(40px, 7vh, 88px) 0; border-top: 1px solid rgba(78, 89, 99, .12); }
.faq h2 { margin: 0 0 20px; font: 500 clamp(26px, 2.8vw, 38px)/1.1 var(--sans); letter-spacing: -.03em; }
.faq details { border-bottom: 1px solid rgba(78, 89, 99, .15); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font: 500 17px/1.4 var(--sans); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 300 26px/1 var(--sans); color: var(--marque-vif); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: #3b454e; max-width: 68ch; }

.liees { padding: clamp(40px, 7vh, 80px) 0; border-top: 1px solid rgba(78, 89, 99, .12); }
.liees-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.liees h2 { margin: 0; font: 500 clamp(22px, 2.2vw, 28px)/1.1 var(--sans); letter-spacing: -.02em; }
.liees-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.liee {
  display: grid; gap: 6px; align-content: start; padding: 10px 10px 18px; border-radius: 16px; text-decoration: none;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(78, 89, 99, .12);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.liee:hover { border-color: var(--marque-vif); transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(29, 34, 38, .45); }
.liee img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 8px; background: var(--beton); }
.liee-groupe { padding: 0 8px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ombre); }
.liee-nom { padding: 0 8px; font: 500 18px/1.25 var(--sans); color: var(--marque); }
.liee-teaser { padding: 0 8px; font-size: 14px; line-height: 1.5; color: #4a545d; }

.bandeau-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  margin: clamp(24px, 5vh, 56px) 0 clamp(48px, 9vh, 96px); padding: clamp(28px, 5vw, 52px);
  border-radius: 22px; background: var(--marque); color: var(--chaux);
  box-shadow: 0 40px 90px -40px rgba(24, 45, 76, .8);
}
.bandeau-demo h2 { margin: 0 0 8px; font: 500 clamp(26px, 3vw, 40px)/1.05 var(--sans); letter-spacing: -.035em; }
.bandeau-demo p { margin: 0; color: var(--marque-clair); max-width: 52ch; }

/* l'horloge de la visite laisse la place au menu sur les écrans moyens */
@media (max-width: 1180px) { .barre .horloge { display: none; } }

/* ----------------------------------------------------------------- petits écrans */
@media (max-width: 720px) {
  .horloge { display: none; }
  .rail { display: none; }
  .voile::after { background: linear-gradient(0deg, rgba(29, 34, 38, .9) 0%, rgba(29, 34, 38, .6) 40%, rgba(29, 34, 38, 0) 65%); }
  .panneau {
    left: 12px; right: 12px; width: auto; bottom: calc(14px + env(safe-area-inset-bottom) + var(--cache-bas));
    padding: 18px 20px 30px; border-radius: 16px;
  }
  .panneau .repere { margin-bottom: 12px; }
  .panneau .repere b { font-size: 30px; }
  .panneau h2 { font-size: 23px; }
  .panneau p.texte { font-size: 14.5px; }
  .panneau .jauge { left: 20px; right: 20px; bottom: 13px; }
  .fin-grille { grid-template-columns: 1fr; gap: 32px; }
  .demo { padding: 10px 12px; font-size: 13px; }
  .demande-carte { padding: 22px 20px 18px; }
  .texte-legal dl { grid-template-columns: 1fr; gap: 2px; }
  .menu { display: none; }
  .menu-mobile { display: block; }
  .barre { gap: 10px; }
  .demo-long { display: none; }                 /* marque, menu et démo tiennent sur un téléphone */
  .demo-court { display: inline; }
  .fin-liens.quatre, .fin-liens.trois { grid-template-columns: 1fr 1fr; }
  .liees-grille { grid-template-columns: 1fr; }
  .bloc { grid-template-columns: 1fr; }
  .bloc.inverse > .bloc-texte { order: 0; }
  .pied-plan { grid-template-columns: 1fr 1fr; }
  .pied-plan > div { grid-column: 1 / -1; }
  .texte-legal dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .panneau, .panneau .mot, .panneau .point, .accueil-contenu { transform: none; }
  .accueil-logo, .accueil-marque, .accueil-baseline, .accueil-defiler, .accueil-defiler i { animation: none; }
}