/* ============================================================
   Automation-K

   Deux couleurs, pas plus : un crème chaud et une encre presque
   noire. Aucun accent coloré, aucun dégradé. L'emphase passe par
   l'italique du serif, le blanc de la page et des filets d'un
   pixel. Une seule section est inversée, pour la respiration.
   ============================================================ */

:root {
  --paper:     #F6F3EC;
  --paper-2:   #EFEBE2;
  --ink:       #14130F;
  --ink-2:     #0C0B08;
  --muted:     #6B675D;
  --faint:     #918C81;
  --line:      #DCD7CB;
  --line-soft: #E8E4DA;

  --max: 1120px;
  --pad: clamp(1.4rem, 5vw, 3.5rem);
  --ease: cubic-bezier(.19, 1, .22, 1);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 840px; }

/* ---------------- Typographie ---------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -0.018em;
  margin: 0 0 .55em;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.008em; }

h1 em, h2 em { font-style: italic; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.7rem;
}

.lead {
  font-size: clamp(1.04rem, 1.8vw, 1.2rem);
  color: var(--muted); max-width: 56ch; line-height: 1.78;
}

/* ---------------- Navigation ---------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 243, 236, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .5s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; }

.brand {
  font-family: var(--serif); font-size: 1.26rem; letter-spacing: .005em;
  color: var(--ink); text-decoration: none;
}
.brand span { color: var(--faint); }

.nav-links { display: flex; gap: 2.2rem; align-items: center; }
.nav-links a {
  color: var(--muted); text-decoration: none;
  font-size: .855rem; letter-spacing: .02em;
  transition: color .3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
@media (max-width: 880px) { .nav-links a:not(.btn) { display: none; } }

/* ---------------- Boutons ----------------
   Au repos : un simple rectangle au filet d'un pixel.
   Au survol : une pastille s'etend jusqu'a remplir le bouton,
   le libelle glisse et s'efface, un second libelle entre avec
   une fleche. La structure interne est posee par boutons.js.

   Le retrait horizontal est volontairement genereux : le second
   libelle porte une fleche, donc il est plus large que le premier,
   et sans cette marge il serait rogne par le debordement masque. */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink);
  padding: .84rem 2rem; border-radius: 0;
  font-family: var(--sans);
  font-size: .87rem; letter-spacing: .06em; font-weight: 500;
  text-decoration: none; border: 1px solid var(--ink);
  transition: border-color .35s var(--ease), color .35s var(--ease);
  isolation: isolate;
}

/* Sans le script, le bouton reste un bouton : on remplit au survol. */
.btn:not(.btn-anime):hover { background: var(--ink); color: var(--paper); }

.btn-lbl {
  position: relative; z-index: 2;
  transition: transform .38s var(--ease), opacity .3s var(--ease);
}
.btn:hover .btn-lbl, .btn:focus-visible .btn-lbl {
  transform: translateX(2.8rem); opacity: 0;
}

.btn-alt {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  transform: translateX(-2.8rem); opacity: 0;
  transition: transform .38s var(--ease), opacity .3s var(--ease);
}
.btn:hover .btn-alt, .btn:focus-visible .btn-alt {
  transform: translateX(0); opacity: 1;
}

.btn-fleche {
  width: 13px; height: 13px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Le remplissage. Aucune pastille visible au repos : un point pose
   sur le libelle se lit comme une salissure, pas comme une intention.
   Le voile est invisible tant qu'il n'est pas etire, et il balaie
   depuis le bord gauche, dans le sens de lecture. */
.btn-fond {
  position: absolute; z-index: 1;
  left: 0; top: 0; width: 100%; height: 100%;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .44s var(--ease);
}
.btn:hover .btn-fond, .btn:focus-visible .btn-fond { transform: scaleX(1); }

/* Bouton principal : se remplit d'encre, le second libelle passe en creme. */
.btn.btn-anime:hover, .btn.btn-anime:focus-visible { color: var(--ink); }
.btn .btn-alt { color: var(--paper); }

/* Bouton secondaire : filet plus pale, remplissage discret,
   libelle qui reste en encre. La hierarchie tient au survol. */
.btn-ghost { border-color: var(--line); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--ink); }
.btn-ghost .btn-fond { background: var(--paper-2); }
.btn-ghost .btn-alt { color: var(--ink); }
.btn-ghost:not(.btn-anime):hover { background: var(--paper-2); color: var(--ink); }

/* Bouton sur fond sombre : inversion complete. */
.btn-pale { color: var(--paper); border-color: rgba(246, 243, 236, .32); }
.btn-pale:hover, .btn-pale:focus-visible { border-color: var(--paper); color: var(--paper); }
.btn-pale .btn-fond { background: var(--paper); }
.btn-pale .btn-alt { color: var(--ink); }
.btn-pale:not(.btn-anime):hover { background: var(--paper); color: var(--ink); }

/* Dans la barre de navigation, la regle .nav-links a est plus specifique
   que .btn et lui imposait le gris des liens. On la rattrape ici plutot
   que de poser un !important sur la couleur du bouton. */
.nav-links a.btn { color: var(--ink); }
.nav-links a.btn:hover, .nav-links a.btn:focus-visible { color: var(--ink); }

.btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.btn-pale:focus-visible { outline-color: var(--paper); }

.btn-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  .btn-lbl, .btn-alt, .btn-fond { transition: none; }
}

/* ---------------- Sections ---------------- */

section { padding: clamp(5rem, 10vw, 8.5rem) 0; position: relative; }
section > .wrap { position: relative; }
section + section > .wrap::before {
  content: ""; position: absolute; top: calc(-1 * clamp(5rem, 10vw, 8.5rem)); left: 0; right: 0;
  height: 1px; background: var(--line);
}

section.dark { background: var(--ink-2); color: var(--paper); }
section.dark h2, section.dark h3 { color: var(--paper); }
section.dark .lead { color: rgba(246, 243, 236, .58); }
section.dark .eyebrow { color: rgba(246, 243, 236, .38); }
section.dark > .wrap::before { display: none; }
section.dark + section > .wrap::before { display: none; }

.head { max-width: 58ch; margin-bottom: clamp(3rem, 5.5vw, 4.5rem); }
.scene { perspective: 1400px; perspective-origin: 50% 30%; }

/* ---------------- Écran d'accueil ----------------
   Un plein écran, une seule phrase, rien d'autre. Le reste du site
   commence sous la ligne de flottaison, ce qui oblige à faire un
   geste pour y aller. C'est le geste qui donne son poids à la phrase. */

.hero {
  min-height: calc(100vh - 78px);
  min-height: calc(100svh - 78px);
  display: flex; flex-direction: column;
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
  position: relative;
}
.hero > .wrap::before { display: none; }

.hero-inner { flex: 1 1 auto; display: flex; align-items: center; }

.hero-phrase {
  font-size: clamp(2.7rem, 7.6vw, 5.6rem);
  max-width: 16ch;
  margin-bottom: 2rem;
}
.hero-lead { max-width: 52ch; }

.hero-bas { flex: 0 0 auto; padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.hero-bas-inner {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap;
}
.hero .marks { margin-top: 0; flex: 1 1 460px; }

.defiler {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.1rem 0 0;
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--faint); text-decoration: none;
  transition: color .35s var(--ease);
  flex: 0 0 auto;
}
.defiler:hover { color: var(--ink); }
.defiler svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  animation: descendre 2.6s var(--ease) infinite;
}
@keyframes descendre {
  0%, 62%, 100% { transform: translateY(0); opacity: .75; }
  30%           { transform: translateY(5px); opacity: 1; }
}

/* Sur un écran bas, la hauteur pleine devient une contrainte inutile. */
@media (max-height: 620px) {
  .hero { min-height: 0; padding-bottom: 3rem; }
  .defiler svg { animation: none; }
}

/* Sur téléphone, les trois mentions font déborder l'écran d'accueil.
   Elles sont reprises plus bas dans les sections conformité et
   « ce qui vous appartient », donc on les retire ici plutôt que de
   sacrifier la tenue en un seul écran. */
@media (max-width: 640px) {
  .hero-phrase { font-size: clamp(2.3rem, 10.5vw, 3.1rem); margin-bottom: 1.4rem; }
  .hero-lead { font-size: 1rem; line-height: 1.68; }
  .hero .btn-row { margin-top: 1.9rem; }
  .hero .marks { display: none; }
  .hero-bas-inner { justify-content: flex-start; }
  .hero-bas { padding-bottom: 1.5rem; }
}

/* ---------------- La conversation ---------------- */

.conv-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
@media (max-width: 940px) { .conv-grid { grid-template-columns: 1fr; } }

.incl-titre { margin-bottom: 1.2rem; }

.marks { display: flex; flex-wrap: wrap; margin-top: 3.2rem; border-top: 1px solid var(--line); }
.mark { padding: 1.1rem 2rem 0 0; margin-right: 1rem; font-size: .79rem; color: var(--faint); letter-spacing: .02em; }
.mark strong {
  display: block; font-family: var(--serif); font-size: 1.02rem;
  color: var(--ink); font-weight: 400; letter-spacing: 0; margin-bottom: .15rem;
}

@media (prefers-reduced-motion: reduce) {
  .defiler svg { animation: none; }
}

/* ---------------- Téléphone ---------------- */

.phone-stage {
  transform-style: preserve-3d; display: grid; place-items: center;
  grid-template-columns: minmax(0, 1fr); min-width: 0;
}
.phone {
  width: 100%; max-width: min(332px, 100%); min-width: 0;
  background: #FCFAF6; border: 1px solid var(--line); border-radius: 26px;
  padding: 1.3rem 1rem 1.6rem;
  box-shadow: 0 30px 60px -34px rgba(20, 19, 15, .28);
  transform-style: preserve-3d; will-change: transform;
}
.phone-bar {
  display: flex; align-items: center; gap: .65rem;
  padding: 0 .4rem 1rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1rem;
}
.phone-dot {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper-2); color: var(--muted);
  font-family: var(--serif); font-size: .8rem;
  display: grid; place-items: center; flex: none;
}
.phone-name { font-size: .87rem; font-weight: 600; }
.phone-sub { font-size: .68rem; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }

.thread { display: flex; flex-direction: column; gap: .5rem; min-height: 366px; }

.msg {
  max-width: 84%; padding: .58rem .88rem; border-radius: 16px;
  font-size: .855rem; line-height: 1.5; overflow-wrap: anywhere;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.msg.them { align-self: flex-start; background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 5px; }
.msg.us { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 5px; }
.msg time { display: block; font-size: .65rem; opacity: .5; margin-top: .25rem; }

/* ---------------- Grilles ---------------- */

.grid { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card { border-top: 1px solid var(--line); padding: 1.8rem 0 0; }
.card .num {
  font-family: var(--serif); font-size: .9rem; color: var(--faint);
  display: block; margin-bottom: 1rem; letter-spacing: .1em;
}
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

section.dark .card { border-top-color: rgba(246, 243, 236, .18); }
section.dark .card .num { color: rgba(246, 243, 236, .4); }
section.dark .card p { color: rgba(246, 243, 236, .6); }

.panel { border-top: 1px solid var(--line); padding: 1.8rem 0 0; }
.panel h3 { margin-bottom: .6rem; }
.panel p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------------- Comparaison ---------------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } }
.compare > div { padding: 2.2rem clamp(1.5rem, 3vw, 2.4rem) 2.4rem; }
.compare .before, .compare .before h3 { color: var(--faint); }
.compare .after { background: var(--ink-2); color: var(--paper); }
.compare .after h3 { color: var(--paper); }
.compare ul { margin: 1.4rem 0 0; padding-left: 0; list-style: none; }
.compare li { margin-bottom: .9rem; padding-left: 1.6rem; position: relative; font-size: .94rem; color: var(--muted); }
.compare .after li { color: rgba(246, 243, 236, .78); }
.compare li::before { content: ""; position: absolute; left: 0; top: .64em; width: 8px; height: 1px; background: var(--line); }
.compare .after li::before { background: rgba(246, 243, 236, .45); width: 12px; }

/* ---------------- Étapes ---------------- */

.steps { display: grid; }
.step {
  display: grid; grid-template-columns: 76px 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.9rem, 3vw, 2.7rem) 0; border-top: 1px solid var(--line); align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--serif); font-size: 1.9rem; color: var(--line); line-height: 1; padding-top: .15rem; }
.step h3 { margin-bottom: .4rem; }
.step p { margin: 0; color: var(--muted); font-size: .96rem; max-width: 62ch; }

/* ---------------- Bandeau ---------------- */

.band { background: var(--ink-2); color: var(--paper); padding: clamp(3.2rem, 6vw, 4.8rem) 0; }
.band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.band h2 { color: var(--paper); margin: 0; font-size: clamp(1.5rem, 2.9vw, 2.1rem); max-width: 24ch; }
.band p { color: rgba(246, 243, 236, .55); margin: .8rem 0 0; font-size: .94rem; max-width: 44ch; }

/* ---------------- Tarification ---------------- */

.tarif { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .tarif { grid-template-columns: 1fr; } }

.tarif-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line);
}
.tarif-line:first-child { border-top: 1px solid var(--line); }
.tarif-line span { color: var(--muted); font-size: .93rem; }
.tarif-line strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; letter-spacing: -.015em; white-space: nowrap; }
.tarif-note { color: var(--faint); font-size: .86rem; margin-top: 1.5rem; line-height: 1.7; }

.incl { list-style: none; padding: 0; margin: 0; }
.incl li {
  padding: .78rem 0 .78rem 1.5rem; border-bottom: 1px solid var(--line-soft);
  position: relative; font-size: .93rem; color: var(--muted);
}
.incl li:first-child { border-top: 1px solid var(--line-soft); }
.incl li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 8px; height: 1px; background: var(--line); }

/* ---------------- Questions ---------------- */

.faq details { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.11rem;
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  transition: color .3s var(--ease);
}
.faq summary:hover { color: var(--muted); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--faint); font-size: 1.3rem; font-family: var(--sans);
  font-weight: 300; line-height: 1; transition: transform .45s var(--ease); flex: none;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq p { color: var(--muted); margin: 1rem 0 0; font-size: .95rem; max-width: 68ch; }

/* ---------------- Contact ---------------- */

.final { text-align: center; }
.final h2 { max-width: 19ch; margin-inline: auto; }
.final .lead { margin-inline: auto; }
.final .btn-row { justify-content: center; }

/* ---------------- Pied ---------------- */

footer { border-top: 1px solid var(--line); padding: 3.2rem 0 3.6rem; font-size: .86rem; color: var(--faint); }
footer .wrap { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
footer strong { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: 1.02rem; }

/* ============================================================
   Apparition, avec un peu de profondeur.
   Rien n'est masqué tant que .js-anim n'est pas posée sur <html>
   par le script. Si le JavaScript échoue, le site reste lisible.
   ============================================================ */

.js-anim .reveal { opacity: 0; transform: translate3d(0, 30px, -50px) rotateX(6deg); transform-origin: 50% 100%; }
.js-anim .reveal.in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.15s var(--ease); }
.js-anim .reveal.d1.in { transition-delay: .1s; }
.js-anim .reveal.d2.in { transition-delay: .2s; }
.js-anim .reveal.d3.in { transition-delay: .3s; }

.js-anim .phone-stage .phone { opacity: 0; transform: translate3d(0, 36px, -120px) rotateY(-14deg) rotateX(8deg); }
.js-anim .phone-stage.in .phone { opacity: 1; transition: opacity 1.1s var(--ease), transform 1.4s var(--ease); }

.js-anim .thread .msg { opacity: 0; transform: translate3d(0, 10px, 0); }
.js-anim .thread .msg.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal, .js-anim .reveal.in,
  .js-anim .phone-stage .phone, .js-anim .thread .msg {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ============================================================
   Roue : ce que l'agent traite
   ============================================================ */

.orbit-section .head { margin-bottom: 2rem; }

.orbit-wrap { position: relative; width: 100%; height: 630px; display: grid; place-items: center; }

.orbit { position: relative; width: 560px; height: 560px; transition: filter .7s var(--ease), opacity .7s var(--ease); }
.orbit-wrap.ouvert .orbit { filter: blur(3px); opacity: .4; }

.orbit-ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(246, 243, 236, .13);
  transform: translate(-50%, -50%); pointer-events: none;
}
.orbit-ring.r1 { width: 400px; height: 400px; }
.orbit-ring.r2 { width: 492px; height: 492px; border-color: rgba(246, 243, 236, .07); }
.orbit-ring.r3 { width: 300px; height: 300px; border-style: dashed; border-color: rgba(246, 243, 236, .08); }

.orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  border: 1px solid rgba(246, 243, 236, .28);
  background: rgba(246, 243, 236, .04);
  z-index: 20;
}
.orbit-core span { font-family: var(--serif); font-size: 1rem; color: var(--paper); line-height: 1.28; padding: 0 1rem; }
.orbit-core::before {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  border: 1px solid rgba(246, 243, 236, .12);
  animation: halo 4.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes halo { 0% { transform: scale(.92); opacity: .7; } 75%, 100% { transform: scale(1.42); opacity: 0; } }

.orbit-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.orbit-btn {
  position: absolute; left: -26px; top: -26px;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: transparent; color: var(--paper);
  border: 1px solid rgba(246, 243, 236, .3);
  transition: transform .45s var(--ease), background .45s var(--ease),
              color .45s var(--ease), border-color .45s var(--ease);
}
.orbit-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.orbit-btn:hover { border-color: var(--paper); transform: scale(1.1); }
.orbit-btn:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
.orbit-node.actif .orbit-btn { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: scale(1.2); }

.orbit-label {
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(246, 243, 236, .5); pointer-events: none;
}

.orbit-aide {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(246, 243, 236, .28); transition: opacity .4s var(--ease);
}
.orbit-wrap.touche .orbit-aide { opacity: 0; }

/* -------- Panneau -------- */

.orbit-panneau {
  position: absolute; left: 50%; top: 50%;
  width: min(840px, 100%);
  transform: translate(-50%, -50%) scale(.97);
  display: grid; grid-template-columns: 1fr 236px; gap: clamp(1.5rem, 3vw, 3rem);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--paper);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  z-index: 500; opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
}
.orbit-wrap.ouvert .orbit-panneau { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 1040px) { .orbit-panneau { grid-template-columns: 1fr; } }

.panneau-fermer {
  position: absolute; top: .9rem; right: 1rem;
  width: 32px; height: 32px; border-radius: 0;
  background: transparent; color: var(--faint); border: 1px solid var(--line);
  font-size: .95rem; line-height: 1; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.panneau-fermer:hover { color: var(--ink); border-color: var(--ink); }

.panneau-corps { min-width: 0; }
.panneau-quand {
  display: block; font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 1.1rem;
}
.panneau-corps h3 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); color: var(--ink); margin-bottom: .7rem; }
.panneau-corps p { margin: 0; font-size: .95rem; line-height: 1.72; color: var(--muted); }
.panneau-evite {
  margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: .89rem; color: var(--muted); line-height: 1.68;
}
.panneau-evite strong {
  display: block; margin-bottom: .35rem; color: var(--faint);
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
}
.panneau-num { margin-top: 1.6rem; font-size: .68rem; letter-spacing: .2em; color: var(--faint); }

/* -------- Roue miniature -------- */

.mini-roue { position: relative; width: 236px; height: 236px; justify-self: center; align-self: center; }
@media (max-width: 1040px) { .mini-roue { width: 210px; height: 210px; margin-top: .5rem; } }
.mini-anneau {
  position: absolute; left: 50%; top: 50%; width: 172px; height: 172px;
  border-radius: 50%; border: 1px dashed var(--line); transform: translate(-50%, -50%);
}
.mini-centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); text-align: center; line-height: 1.4;
}
.mini-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: transform .8s var(--ease); }
.mini-btn {
  position: absolute; left: -16px; top: -16px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: var(--paper); color: var(--muted); border: 1px solid var(--line);
  transition: transform .4s var(--ease), background .4s var(--ease),
              color .4s var(--ease), border-color .4s var(--ease);
}
.mini-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mini-btn:hover { border-color: var(--ink); color: var(--ink); transform: scale(1.14); }
.mini-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.mini-node.actif .mini-btn { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(1.16); }
.mini-node.lie .mini-btn { border-color: var(--ink); color: var(--ink); }

.mini-legende {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  white-space: nowrap; font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}

/* -------- Repli en liste sous 900 px -------- */

.orbit-liste { display: none; }
.orbit-liste li {
  display: grid; grid-template-columns: 42px 1fr; gap: 1.2rem;
  padding: 1.5rem 0; border-top: 1px solid rgba(246, 243, 236, .16); align-items: start;
}
.orbit-liste li:last-child { border-bottom: 1px solid rgba(246, 243, 236, .16); }
.orbit-liste .ico {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(246, 243, 236, .3); color: var(--paper);
  display: grid; place-items: center;
}
.orbit-liste .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.orbit-liste h3 { font-size: 1.03rem; color: var(--paper); margin-bottom: .3rem; }
.orbit-liste p { margin: 0; font-size: .89rem; color: rgba(246, 243, 236, .62); }
.orbit-liste .quand {
  display: inline-block; margin-top: .6rem; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 243, 236, .42);
}

@media (max-width: 900px) {
  .orbit-wrap { display: none; }
  .orbit-liste { display: block; list-style: none; padding: 0; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-core::before { animation: none; opacity: 0; }
  .orbit-panneau, .mini-node, .orbit { transition: none; }
}

/* ---------------- Pages légales ---------------- */

.legal { max-width: 740px; padding-top: 4rem; padding-bottom: 6rem; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); margin-bottom: .4rem; }
.legal .updated { color: var(--faint); font-size: .85rem; margin-bottom: 3.5rem; letter-spacing: .04em; }
.legal h2 { font-size: 1.4rem; margin-top: 3.2rem; padding-top: 1.9rem; border-top: 1px solid var(--line); }
.legal h3 { margin-top: 2rem; font-size: 1.05rem; }
.legal p, .legal li { color: #3A362E; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .55rem; }
.legal .back { display: inline-block; margin-bottom: 2.5rem; font-size: .85rem; text-decoration: none; letter-spacing: .04em; color: var(--faint); }
.legal .back:hover { color: var(--ink); }
.legal .note { background: var(--paper-2); border-left: 1px solid var(--ink); padding: 1.3rem 1.5rem; font-size: .94rem; }