:root {
  --cuivre: #a8552a;
  --cuivre-fonce: #86421f;
  --cuivre-clair: #f2a46c;
  --cuivre-degrade: linear-gradient(135deg, #b05b2c 0%, #a8552a 50%, #8a4220 100%);
  --graphite: #242427;
  --ease-sortie: cubic-bezier(.2, .8, .2, 1);
}

.demo-bandeau {
  position: relative; z-index: 120;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px max(16px, calc((100% - 1200px) / 2));
  background: #16161a; color: #c9c5c1; font: 500 13px/1.4 var(--police-texte);
  border-bottom: 1px solid rgba(242,164,108,.25);
}
.demo-bandeau p { margin: 0; }
.demo-bandeau b { color: #fff; font-weight: 600; }
.demo-bandeau a { color: var(--cuivre-clair); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.demo-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 300; width: min(92vw, 460px); margin: 0; padding: 14px 18px;
  background: #16161a; color: #f2eeea; border: 1px solid var(--cuivre-clair); border-radius: 14px;
  font: 500 14px/1.45 var(--police-texte); box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .25s var(--ease-sortie), transform .25s var(--ease-sortie);
}
.demo-toast.est-la { opacity: 1; transform: translate(-50%, 0); }

.barre-haut .conteneur { justify-content: flex-end; }
.barre-haut { background: var(--graphite); }

.entete {
  background: rgba(250,248,245,.9);
  border-bottom: 1px solid rgba(36,36,39,.06);
  transition: background .35s var(--ease-sortie), border-color .35s var(--ease-sortie);
}
.entete > .conteneur {
  position: relative;
  transition: max-width .45s var(--ease-sortie), height .45s var(--ease-sortie), margin .45s var(--ease-sortie),
              border-radius .45s var(--ease-sortie), background .45s var(--ease-sortie), box-shadow .45s var(--ease-sortie), padding .45s var(--ease-sortie);
}
.logo img { height: 50px; }
.entete.est-defile {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.entete.est-defile > .conteneur {
  max-width: min(1180px, calc(100% - 24px)); height: 64px; margin-top: 8px; padding: 0 10px 0 22px;
  border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -18px rgba(36,36,39,.35), 0 2px 8px rgba(36,36,39,.06);
}
.entete.est-defile .logo img { height: 40px; }
.entete-progression {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--cuivre-degrade); transform-origin: 0 50%; transform: scaleX(var(--progression, 0));
  opacity: 0; transition: opacity .3s;
}
.entete.est-defile .entete-progression { opacity: 1; }

.menu ul { position: relative; gap: 2px; }
.menu a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: 38px; padding: 0 12px;
  border-bottom: 0 !important; border-radius: 999px; color: #3b3a3d; transition: color .25s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--cuivre); }
.menu-pilule {
  position: absolute; left: 0; top: 50%; height: 38px; width: 0; z-index: 0; pointer-events: none;
  border-radius: 999px; background: rgba(168,85,42,.1); box-shadow: inset 0 0 0 1px rgba(168,85,42,.18);
  transform: translate(var(--x, 0), -50%); opacity: 0;
  transition: transform .4s var(--ease-sortie), width .4s var(--ease-sortie), opacity .25s;
}
.menu-pilule.est-la { opacity: 1; }
.ligne-directe:hover, .ligne-directe .icone { color: var(--cuivre); }

.bouton {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 999px; letter-spacing: .01em;
  transition: transform .3s var(--ease-sortie), box-shadow .3s var(--ease-sortie), background-color .3s, color .3s, border-color .3s;
}
.bouton .icone { transition: transform .3s var(--ease-sortie); }
.bouton:hover .icone { transform: translateX(3px); }
.bouton::before {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: -75%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  transform: skewX(-22deg); transition: left .7s var(--ease-sortie);
}
.bouton:hover::before { left: 135%; }
.bouton--principal, .appeler {
  background: var(--cuivre-degrade); color: #fff; border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.12), 0 10px 26px -12px rgba(168,85,42,.85);
}
.bouton--principal:hover, .appeler:hover {
  background: var(--cuivre-degrade); color: #fff; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.12), 0 16px 34px -12px rgba(168,85,42,.95);
}

@property --tour { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bouton--entete::after, .hero-boutons .bouton--principal::after, .panneau-actions .bouton--principal::after, .appel-final .bouton--principal::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--tour), transparent 0 62%, rgba(255,236,220,.95) 76%, transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: altitudes-tour 3.6s linear infinite;
}
@keyframes altitudes-tour { to { --tour: 360deg; } }
.bouton--secondaire {
  background: rgba(255,255,255,.94); color: var(--graphite); border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.45);
}
.bouton--secondaire::before { background: linear-gradient(100deg, transparent, rgba(168,85,42,.14), transparent); }
.bouton--secondaire:hover { background: #fff; color: var(--cuivre-fonce); transform: translateY(-2px); }
.bouton--contour { border: 1.5px solid var(--cuivre); color: var(--cuivre); background: transparent; }
.bouton--contour:hover { background: var(--cuivre-degrade); border-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(168,85,42,.9); }
.bouton--contour-clair { border: 1.5px solid rgba(255,255,255,.7); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bouton--contour-clair:hover { background: rgba(255,255,255,.16); border-color: #fff; transform: translateY(-2px); }
.bouton--sombre { background: var(--graphite); }
.bouton--sombre:hover { background: #36363a; }
.appeler { border-radius: 999px; }

.burger { position: relative; z-index: 2; border-radius: 999px; border-color: rgba(36,36,39,.14); background: rgba(255,255,255,.7); transition: background .3s, color .3s, border-color .3s; }
.burger .icone { transition: transform .45s var(--ease-sortie), opacity .2s; }
.burger[aria-expanded="true"] { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.burger[aria-expanded="true"] .i-fermer { transform: rotate(90deg); }
.panneau {
  top: var(--haut-panneau, 64px); padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(200,113,58,.32), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(168,85,42,.18), transparent 60%),
    #1c1c1f;
  color: #f2eeea;
  clip-path: circle(0 at calc(100% - 40px) 0);
  visibility: hidden;
  transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .7s;
}
.panneau[hidden] { display: flex; }
.panneau.est-ouvert { clip-path: circle(150% at calc(100% - 40px) 0); visibility: visible; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.panneau ul { counter-reset: lien; margin-top: 8px; }
.panneau li { counter-increment: lien; opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease-sortie), transform .45s var(--ease-sortie); }
.panneau.est-ouvert li { opacity: 1; transform: none; transition-delay: calc(.18s + var(--rang, 0) * .045s); }
.panneau li a {
  min-height: 58px; gap: 16px; font: 600 24px/1.1 var(--police-titre); letter-spacing: -.01em;
  color: #f2eeea; border-bottom: 1px solid rgba(255,255,255,.08);
}
.panneau li a::before { content: counter(lien, decimal-leading-zero); font: 600 12px/1 var(--police-texte); color: var(--cuivre-clair); letter-spacing: .08em; min-width: 22px; }
.panneau li a::after {
  content: ""; margin-left: auto; width: 20px; height: 20px; opacity: .45;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .3s var(--ease-sortie), opacity .3s;
}
.panneau li a:hover::after, .panneau li a:focus-visible::after { transform: translateX(4px); opacity: 1; }
.panneau li a[aria-current="page"] { color: var(--cuivre-clair); }
.panneau .panneau-actions { margin-top: auto; padding-top: 24px; opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease-sortie), transform .45s var(--ease-sortie); }
.panneau.est-ouvert .panneau-actions { opacity: 1; transform: none; transition-delay: .62s; }
.panneau .bouton--contour { border-color: rgba(255,255,255,.35); color: #fff; }
.panneau-coord { margin-top: 14px; font: 500 13px/1.6 var(--police-texte); color: #a9a4a0; text-align: center; }
html.menu-ouvert { overflow: hidden; }

.orbite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.orbite-carte { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; margin: 0 auto; }
.orbite-anneaux { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbite-anneaux .anneau { fill: none; stroke: rgba(168,85,42,.35); stroke-width: 1.2; stroke-dasharray: 4 7; }
.orbite-anneaux .anneau-fond { fill: rgba(168,85,42,.045); stroke: none; }
.orbite-anneaux .axe { stroke: rgba(36,36,39,.07); stroke-width: 1; }
.orbite-anneaux .etiquette { font: 600 11px var(--police-texte); fill: #8d8781; letter-spacing: .06em; text-transform: uppercase; }
.orbite-balayage {
  position: absolute; inset: 7%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(200,113,58,.22), rgba(200,113,58,0) 22%, transparent 100%);
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%); mask: radial-gradient(circle, #000 69%, transparent 70%);
  animation: altitudes-balayage 9s linear infinite;
}
@keyframes altitudes-balayage { to { transform: rotate(360deg); } }
.orbite-centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: grid; justify-items: center; gap: 2px; text-align: center; padding: 14px 18px 12px;
  background: var(--graphite); color: #fff; border-radius: 18px; box-shadow: 0 16px 34px -14px rgba(36,36,39,.6);
}
.orbite-centre b { font: 600 15px/1.2 var(--police-titre); }
.orbite-centre small { font: 500 11px/1.2 var(--police-texte); color: var(--cuivre-clair); letter-spacing: .06em; text-transform: uppercase; }
.orbite-point { width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre-clair); box-shadow: 0 0 0 0 rgba(242,164,108,.6); animation: altitudes-pouls 2.2s ease-out infinite; margin-bottom: 4px; }
@keyframes altitudes-pouls { to { box-shadow: 0 0 0 14px rgba(242,164,108,0); } }
.orbite-communes { list-style: none; margin: 0; padding: 0; }
.orbite-communes li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 3; }
.orbite-commune {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; white-space: nowrap;
  background: #fff; color: var(--graphite); border: 1px solid rgba(36,36,39,.1); border-radius: 999px;
  font: 600 13px/1 var(--police-texte); text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(36,36,39,.45);
  transition: transform .3s var(--ease-sortie), background .3s, color .3s, box-shadow .3s;
}
.orbite-commune::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teinte-anneau, var(--cuivre)); }
.orbite-commune:hover, .orbite-commune:focus-visible { background: var(--graphite); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 26px -12px rgba(36,36,39,.6); }
.anneau-1 { --teinte-anneau: #a8552a; }
.anneau-2 { --teinte-anneau: #d98a52; }
.anneau-3 { --teinte-anneau: #b9b2ab; }
.orbite-loin { position: absolute; left: 0; top: 50%; transform: translate(-6%, -50%); z-index: 3; }
.orbite-loin .orbite-commune { background: transparent; border-style: dashed; border-color: rgba(168,85,42,.5); box-shadow: none; }

.orbite [data-anneau] { stroke-dashoffset: 0; }
.js .orbite:not(.est-visible) .orbite-communes li,
.js .orbite:not(.est-visible) .orbite-loin { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.orbite-communes li, .orbite-loin { transition: opacity .5s var(--ease-sortie), transform .6s var(--ease-sortie); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
.orbite-loin { transform: translate(-6%, -50%); }
.js .orbite:not(.est-visible) .orbite-anneaux .anneau { opacity: 0; transform: scale(.85); }
.orbite-anneaux .anneau { transform-origin: 300px 300px; transition: opacity .8s var(--ease-sortie), transform .9s var(--ease-sortie); }
.orbite-anneaux .anneau.a2 { transition-delay: .12s; }
.orbite-anneaux .anneau.a3 { transition-delay: .24s; }
.orbite-legende h3 { font: 600 22px/1.25 var(--police-titre); color: var(--graphite); }
.orbite-legende > p { margin-top: 10px; color: var(--texte-doux); }
.orbite-paliers { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.orbite-paliers li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; padding: 14px 16px;
  background: #fff; border: 1px solid rgba(36,36,39,.08); border-radius: 16px; box-shadow: 0 10px 24px -20px rgba(36,36,39,.5);
}
.orbite-paliers .rond { grid-row: span 2; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--teinte-anneau); box-shadow: 0 0 0 5px color-mix(in srgb, var(--teinte-anneau) 18%, transparent); }
.orbite-paliers b { font: 600 15px/1.3 var(--police-titre); color: var(--graphite); }
.orbite-paliers span { font-size: 14px; line-height: 1.5; color: var(--texte-doux); }
.orbite-legende .colonne-bouton { margin-top: 24px; text-align: left; }

@media (width < 1200px) {
  .entete.est-defile > .conteneur { height: 56px; margin-top: 6px; padding: 0 8px 0 16px; }
  .entete.est-defile .logo img { height: 36px; }
  .logo img { height: 42px; }
}
@media (width < 960px) {
  .orbite { grid-template-columns: 1fr; gap: 32px; }
}
@media (width < 768px) {
  .demo-bandeau { font-size: 12px; padding: 8px 16px; }
  .demo-bandeau p span { display: none; }
  .demo-toast { bottom: 84px; }
  .orbite-carte { max-width: 420px; }
  .orbite-commune { height: 26px; padding: 0 8px; font-size: 11px; gap: 4px; }
  .orbite-commune::before { width: 5px; height: 5px; }
  .orbite-centre { padding: 10px 12px 8px; border-radius: 14px; }
  .orbite-centre b { font-size: 13px; }
  .orbite-anneaux .etiquette { font-size: 14px; }
  .panneau li a { min-height: 52px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbite-balayage, .orbite-point, .bouton--entete::after, .hero-boutons .bouton--principal::after,
  .panneau-actions .bouton--principal::after, .appel-final .bouton--principal::after { animation: none; }
  .panneau, .panneau.est-ouvert, .panneau li, .panneau .panneau-actions, .entete > .conteneur, .menu-pilule { transition: none; }
  .bouton::before { display: none; }
}

html.mvt .entete::before { transition: transform 200ms var(--mvt-courbe, ease), box-shadow 200ms, opacity .35s; }
.entete.est-defile::before, html.mvt .entete.est-defile::before { opacity: 0; box-shadow: none; }
.entete.est-defile::after { opacity: 0; }
html.mvt .entete.est-defile > .conteneur, html.mvt .entete.est-defile .logo { transform: none; }
.entete.est-defile .ligne-directe { display: none; }
.entete.est-defile .menu a { padding: 0 10px; }
.entete.est-defile .bouton--entete { height: 44px; }

.orbite-anneaux .anneau { stroke: rgba(168,85,42,.5); stroke-width: 1.4; }
.orbite-anneaux .anneau.a1 { stroke: rgba(168,85,42,.75); }
.orbite-anneaux .anneau-fond { fill: url(#orbite-degrade); }
@media (width < 768px) {
  .orbite-centre { padding: 7px 10px 6px; gap: 0; }
  .orbite-centre small { display: none; }
  .orbite-centre b { font-size: 11.5px; }
  .orbite-point { width: 7px; height: 7px; margin-bottom: 2px; }
  .orbite-loin { position: static; transform: none !important; margin-top: 10px; text-align: center; }
  .orbite-carte { margin-bottom: 44px; }
  .orbite-loin { position: absolute; left: 50%; top: auto; bottom: -40px; transform: translateX(-50%) !important; }
}