/* « Invite une IA sur le globe » — base : cine.css. Grille de 8 px.
   Bureau : la Terre plein écran, le panneau à gauche. Téléphone : la Terre en haut, le panneau défile par-dessus. */
.stage { position: fixed; inset: 0; z-index: 0; }
.stage .globe { position: absolute; inset: 0; }

.panel {
  position: relative; z-index: 5; width: 544px; min-height: 100svh;
  padding: 128px 0 var(--s12) var(--s12);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s5);
  pointer-events: none;
}
.panel > * { pointer-events: auto; }
.step { display: grid; gap: var(--s3); }
.eyebrow { margin: 0; display: flex; align-items: center; gap: var(--s1); font: 400 12px/16px var(--mono); color: var(--accent); letter-spacing: .02em; }
h1 { margin: 0; font: 400 56px/64px var(--display); letter-spacing: -.02em; }
h2 { margin: 0; font: 400 44px/52px var(--display); letter-spacing: -.02em; }
h3 { margin: 0; font: 400 24px/32px var(--display); }
.lede { margin: 0; max-width: 448px; font: 400 18px/28px var(--text); color: var(--m); }
.step > .btn { justify-self: start; }
.note { margin: 0; font: 400 14px/24px var(--text); color: var(--f); }
.note.err { color: var(--t); }

/* Attente : point qui respire */
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: breathe 2.4s var(--ease) infinite; }
.done .pulse { animation: none; }

.how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.how li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s2); align-items: start; }
.how p { margin: 4px 0 0; font: 400 16px/24px var(--text); color: var(--m); }
.how b { color: var(--t); font-weight: 500; }
.k { margin: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line2); border-radius: 50%; font: 400 12px/16px var(--mono); color: var(--m); }
.msg {
  margin: var(--s2) 0; padding: var(--s2) var(--s3); border: 1px solid var(--line2); border-radius: 16px;
  background: rgba(35, 33, 32, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 400 16px/24px var(--text); color: var(--t); overflow-wrap: anywhere; user-select: all;
}
.msg .link { display: block; margin-top: var(--s1); font-size: 14px; line-height: 20px; color: var(--accent); }

/* Arrivée */
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); }
.facts div { display: contents; }
.facts dt { font: 400 12px/24px var(--mono); color: var(--f); }
.facts dd { margin: 0; font: 400 16px/24px var(--text); color: var(--t); }
.facts .ok { color: var(--accent); }
.facts .warn { color: #fff; }
.secret {
  display: grid; gap: var(--s1); padding: var(--s3); border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(35, 33, 32, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.secret .k { width: auto; height: auto; border: 0; place-items: start; font-size: 12px; color: var(--f); }
.secret .code { margin: 0; font: 500 40px/48px var(--mono); letter-spacing: .04em; color: var(--accent); }
.secret .dim { margin: 0; font: 400 14px/24px var(--text); }
.discovery { margin: 0; max-width: 448px; font: 400 18px/28px var(--text); color: var(--t); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.wl { display: grid; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.wl .dim { margin: 0; font: 400 16px/24px var(--text); }
.wl .field { height: 56px; }
.wl .field .btn { height: 40px; }
.wl .consent, .wl .wl-status { padding: 0 var(--s1); }

/* Phrase « démo sur notre site » */
.demo-note { margin: 0; padding-left: var(--s2); border-left: 1px solid rgba(var(--accent-rgb), .5); font: 400 14px/24px var(--text); color: var(--m); max-width: 448px; }
.demo-note a { color: var(--t); }

/* « Et ton site ? » */
.lede.strong { color: var(--t); }
.lede a { color: var(--accent); }
.check { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.check summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; font: 400 14px/24px var(--text); color: var(--m); }
.check summary::-webkit-details-marker { display: none; }
.check summary::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line2); border-radius: 50%; font: 400 14px/1 var(--mono); transition: transform .4s var(--ease); }
.check[open] summary::before { transform: rotate(45deg); }
.check summary:hover { color: var(--t); }
.check[open] > :not(summary) { animation: rise .6s var(--ease); }
.check h2 { font-size: 36px; line-height: 44px; }
.check .dim { margin: 0; font: 400 16px/24px var(--text); max-width: 448px; }
.check .field { height: 56px; padding-left: var(--s3); }
.check .field .btn { height: 40px; }
#check-result { display: grid; gap: var(--s2); }
#check-result[hidden] { display: none; }
#check-result > .btn { justify-self: start; }
.check-site { margin: var(--s1) 0 0; font-size: 14px; color: var(--t); }
.verdicts { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line2); border-radius: 16px; background: rgba(35, 33, 32, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.verdicts li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 var(--s2); border-top: 1px solid var(--line); animation: rise .8s var(--ease) both; }
.verdicts li:first-child { border-top: 0; }
.verdicts i { width: 8px; height: 8px; border-radius: 50%; }
.verdicts .who { font: 400 15px/20px var(--text); color: var(--t); }
.verdicts .who small { display: block; font: 400 12px/16px var(--text); color: var(--f); }
.verdicts .v { font: 400 12px/16px var(--mono); text-align: right; }
.verdicts .allowed { color: var(--accent); }
.verdicts .robots, .verdicts .firewall { color: #fff; }

/* Journal des visites */
.log { display: grid; gap: var(--s1); }
.log .k { width: auto; height: auto; border: 0; place-items: start; font-size: 12px; color: var(--f); }
.log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.log li { display: flex; align-items: baseline; gap: var(--s1); font: 400 14px/24px var(--text); color: var(--m); animation: rise .8s var(--ease); }
.log li time { font: 400 12px/24px var(--mono); color: var(--f); flex: none; }
.log li i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--f); transform: translateY(-1px); }
.log li b { color: var(--t); font-weight: 500; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* Étiquette qui accompagne un arc (nom de l'IA + pays) */
.arc-tag {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s1); height: 32px; padding: 0 12px;
  border: 1px solid var(--line2); border-radius: 999px; background: rgba(26, 24, 23, .78);
  font: 400 12px/16px var(--mono); color: var(--t); transition: opacity .8s var(--ease);
}
.arc-tag i { width: 8px; height: 8px; border-radius: 50%; }

.mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; gap: var(--s3); padding: 0 var(--s4) var(--s3); font: 400 12px/16px var(--text); color: var(--f); pointer-events: none; }
.mini > * { pointer-events: auto; }
.mini a { color: var(--m); text-decoration: none; }

@media (max-width: 1100px) { .panel { padding-left: var(--s6); width: 496px; } h1 { font-size: 48px; line-height: 56px; } h2 { font-size: 36px; line-height: 44px; } }
@media (max-width: 860px) {
  /* La Terre occupe le haut de l'écran ; le panneau défile par-dessus, sur un fond qui s'assombrit. */
  .panel {
    width: auto; min-height: 0; justify-content: flex-start; gap: var(--s4);
    margin-top: 52svh; padding: var(--s6) var(--s2) var(--s12);
    background: linear-gradient(to bottom, rgba(26, 24, 23, 0), var(--bg) 96px);
  }
  h1 { font-size: 36px; line-height: 44px; }
  h2 { font-size: 30px; line-height: 36px; }
  .lede { font-size: 16px; line-height: 24px; }
  .step > .btn { justify-self: stretch; }
  .secret .code { font-size: 32px; line-height: 40px; }
  .discovery { font-size: 16px; line-height: 24px; }
  .check h2 { font-size: 30px; line-height: 36px; }
  .check .field .btn, #check-result > .btn { width: auto; }
  #check-result > .btn { justify-self: stretch; }
  /* Petit globe fixé en haut à droite pendant la lecture du résultat */
  .mini-globe .stage { inset: auto; top: 72px; right: var(--s2); width: 136px; height: 136px; z-index: 8; border-radius: 50%; border: 1px solid var(--line2); background: var(--bg); box-shadow: 0 8px 32px rgba(0, 0, 0, .5); animation: pop .6s var(--ease); }
  .mini-globe .site-label, .mini-globe #tags { display: none; }
  .verdicts li { cursor: pointer; }
  .verdicts li:active { background: rgba(var(--accent-rgb), .08); }
  .mini { position: static; justify-content: center; flex-wrap: wrap; padding: 0 var(--s2) var(--s4); }
  .how li { grid-template-columns: 32px 1fr; gap: 12px; }
  .how .btn { width: 100%; }
}
@keyframes pop { from { opacity: 0; transform: scale(.8); } }