/* Compléments du site publié (le reste du style vient des maquettes, recopié dans chaque page). */
html { scroll-behavior: smooth; }
html, body { margin: 0; }
.form-erreur { margin: 0; padding: 10px 12px; border-radius: 8px; background: #FDECEC; color: #B4232B; font-size: 14px; }
.form-erreur:empty { display: none; }
[data-action] { cursor: pointer; }
button:disabled { opacity: .6; cursor: progress; }

/* ---- Globe d'ouverture : il tourne puis plonge vers le Mali au défilement ---- */
.globe-intro { position: relative; height: 260vh; background: var(--fond); }
.globe-scene { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe-texte { position: absolute; left: 0; right: 0; bottom: 9vh; text-align: center; padding: 0 24px; pointer-events: none; transition: opacity .2s; }
.globe-sur { margin: 0 0 16px; font: 500 13px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); }
.globe-titre { margin: 0 auto; max-width: 980px; font: 900 clamp(34px, 5.6vw, 84px)/.95 Archivo, sans-serif; font-stretch: 104%; letter-spacing: -.03em; color: var(--encre); }
.globe-aide { margin: 22px 0 0; font-size: 14px; color: var(--encre-2); }
.globe-aide span { display: inline-block; animation: descend 1.6s ease-in-out infinite; }
@keyframes descend { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
html.sans-globe .globe-intro { display: none; }
@media (prefers-reduced-motion: reduce) { .globe-intro { display: none; } }

/* ---- Téléphone : en-tête sur une ligne, menu repliable, écran PRO empilé ---- */
@media (max-width: 760px) {
  .entete > div { flex-wrap: nowrap !important; gap: 8px !important; padding: 10px 14px !important; position: relative; }
  .entete img { height: 30px !important; }
  .entete-nav, .entete-demo { display: none !important; }
  .burger { display: grid !important; }
  .entete-actions { gap: 6px !important; flex-wrap: nowrap !important; }
  .entete-actions > button, .entete-actions > a[title] { width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; }
  .entete-actions .lueur { padding: 10px !important; font-size: 13px !important; white-space: nowrap; }
  .entete.ouvert .entete-nav { display: flex !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch !important;
    gap: 2px !important; padding: 8px 14px 14px; background: var(--fond); border-bottom: 1px solid var(--trait); box-shadow: var(--ombre); }
  .entete.ouvert .entete-nav a { padding: 14px 12px !important; font-size: 16px !important; }
  .sous-nav { top: 60px !important; }
  .recit-collant { top: 60px !important; height: calc(100vh - 60px) !important; }
  .ecran-grille { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }
  .ecran-grille > div:first-child { border-right: 0 !important; border-bottom: 1px solid #1E4258; }
  .ecran-grille > div:last-child { min-height: 300px; }
}

/* Champ piège anti-robots : hors de l'écran, jamais vu ni atteint au clavier. */
.piege { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Téléphone : le texte de l'étape en cours reste affiché au-dessus de l'animation du récit. */
@media (max-width: 860px) {
  .recit .recit-textes { display: grid !important; gap: 14px !important; }
  .recit .recit-textes .etape-txt:not(.actif) { display: none !important; }
  .recit .recit-textes .etape-txt.actif { transform: none !important; animation: etape-entre .35s ease-out; }
  .recit .recit-textes h3 { font-size: 21px !important; }
  .recit .recit-textes p { font-size: 15px; }
  .recit { gap: 18px !important; }
}
@keyframes etape-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }