/* ==================================================================
   QRAvenue — Modèle 1 (Magazine clair)
   CSS partagée entre fiche, jeu, carte, enquête, sport, parcours.
   ================================================================== */

:root {
  --noir: #0d0d0d;
  --or: #c9a84c;
  /* Déclinaisons calculées depuis --or : suivent la couleur d'accent choisie
     en admin (charte.php) ou imposée par un habillage. */
  --or-clair: color-mix(in srgb, var(--or) 78%, #ffffff);
  --or-sombre: color-mix(in srgb, var(--or) 82%, #000000);
  --beige: #f5f2ed;
  --ivoire: #fbf9f4;
  --gris: #6b6b6b;
  --gris-clair: #e0dcd2;
  --rouge: #c0392b;
  --vert: #2d6a4f;
  --bleu: #3b6ea8;
  /* Couleurs de l'INFORMATION, distinctes de l'accent de marque : une ville
     dont la marque est rouge ne doit pas confondre son accent et une erreur. */
  --erreur: var(--rouge);
  --succes: var(--vert);
  --cadre: #e6e1d8;          /* fond autour de la colonne de lecture */
  --texte: #333;             /* texte courant des articles */
  /* Familles de police — surchargées par charte.php ou par un habillage. */
  --police-titre: 'Playfair Display', Georgia, serif;
  --police-lecture: 'Lora', Georgia, serif;
  --police-ui: 'Inter', Arial, sans-serif;
  /* Largeur de la colonne de lecture (téléphone par défaut).
     Élargie sur tablette/desktop via media queries plus bas. */
  --m1-col: 430px;
}

/* Tablette portrait & au-delà : colonne de lecture plus large
   (sinon la fiche restait un mince ruban centré, illisible sur tablette). */
@media (min-width: 768px)  { :root { --m1-col: 620px; } }
@media (min-width: 1200px) { :root { --m1-col: 720px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--police-ui);
  color: var(--noir);
  background: var(--cadre);
  line-height: 1.65;
}

/* FRAME mobile */
.m1-frame { padding: 0; min-height: 100vh; background: var(--cadre); }
.m1-mobile {
  max-width: var(--m1-col);
  margin: 0 auto;
  background: var(--beige);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding-bottom: 90px;
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
}
@media (max-width: 470px) { .m1-mobile { box-shadow: none; } .m1-frame { padding: 0; } }

/* TABLETTE / DESKTOP — habillage des marges latérales : la colonne de lecture
   est posée comme une page de magazine sur une surface éditoriale sombre, avec
   vignette et forte ombre portée, pour que les grands écrans ne montrent plus
   un ruban centré perdu dans du vide. Header & bottom-nav (fixés, max-width:
   var(--m1-col)) s'alignent automatiquement sur la colonne. */
@media (min-width: 768px) {
  .m1-frame {
    background:
      radial-gradient(110% 70% at 50% 6%, rgba(255,255,255,0.10), transparent 60%),
      radial-gradient(150% 130% at 50% 125%, rgba(0,0,0,0.32), transparent 55%),
      linear-gradient(180deg, #b9af9b 0%, #a89d87 55%, #968b75 100%);
    background-attachment: fixed;
  }
  .m1-mobile {
    box-shadow: 0 22px 80px rgba(35,25,10,0.40), 0 4px 16px rgba(35,25,10,0.22);
    border-left: 1px solid rgba(255,255,255,0.18);
    border-right: 1px solid rgba(0,0,0,0.10);
  }
}
@media (min-width: 1500px) {
  :root { --m1-col: 780px; }
  .m1-mobile { box-shadow: 0 30px 100px rgba(35,25,10,0.45), 0 6px 20px rgba(35,25,10,0.25); }
}

/* ===========================================================================
   MISE EN PAGE DESKTOP DE LA FICHE — 2 colonnes (visuel fixe / contenu défilant)
   Les wrappers .m1-detail* sont TRANSPARENTS en mobile (display:contents) : le
   rendu téléphone est identique à avant. La grille ne s'active qu'à ≥1024px et
   uniquement sur la vue fiche détaillée (présence de .m1-detail).
   =========================================================================== */
.m1-detail, .m1-detail-visuel, .m1-detail-corps { display: contents; }

@media (min-width: 1024px) {
  /* La fiche occupe une large colonne ; header & bottom-nav s'alignent dessus. */
  .m1-mobile:has(.m1-detail) { max-width: 1180px; overflow: visible; }
  .m1-mobile:has(.m1-detail) .m1-app { max-width: 1180px; }
  body:has(.m1-detail) .m1-bottom-nav { max-width: 1180px; }

  .m1-detail {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    align-items: start;
  }
  /* Colonne visuelle : la photo héro reste fixe pendant le défilement du texte */
  .m1-detail-visuel {
    display: block; position: sticky; top: 0;
    height: 100vh; overflow: hidden;
  }
  .m1-detail-visuel .m1-hero { height: 100vh; min-height: 0; border-radius: 0; }
  .m1-detail-visuel .m1-social-rail { top: 90px; right: 18px; }

  /* Colonne contenu : démarre sous le header fixe et défile normalement */
  .m1-detail-corps { display: block; padding-top: 64px; }
  .m1-detail-corps .m1-article { padding-top: 34px; }
}

/* RIBBON debug */
.m1-ribbon {
  position: fixed; top: 14px; left: 14px;
  background: var(--or); color: var(--noir);
  padding: 6px 14px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; border-radius: 2px; z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.m1-ribbon a { color: var(--noir); text-decoration: none; }

/* HEADER */
header.app {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--m1-col);   /* aligné sur la colonne de lecture (corrige le décalage tablette/desktop) */
  z-index: 30;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), transparent);
}
header.app .back {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 18px;
  flex-shrink: 0;
}
header.app .back i { line-height: 1; }
header.app .ville {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  padding: 5px 14px 5px 5px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--noir);
}
header.app .ville img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
header.app .ville .info { line-height: 1.1; }
header.app .ville .info strong { display: block; font-family: var(--police-titre); font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }
header.app .ville .info small { font-size: 9px; color: var(--gris); letter-spacing: 1px; text-transform: uppercase; }
header.app .right { display: flex; gap: 6px; align-items: center; }
header.app .pill {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
header.app .pill i { font-size: 16px; line-height: 1; }
header.app .pill.square { width: 40px; padding: 0; justify-content: center; }

/* HERO photo 90vh */
.hero {
  position: relative;
  height: 90vh;
  min-height: 600px;
  background-size: cover;
  background-position: center;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.88));
}
.m1-hero-content {
  position: absolute;
  bottom: 140px;
  left: 0; right: 0;
  padding: 0 24px;
  color: #fff;
  z-index: 10;
}
.m1-hero-content .kicker {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 12px;
}
.m1-hero-content .kicker::before { content: ''; width: 32px; height: 1px; background: var(--or-clair); }
.m1-hero-content h1 {
  font-family: var(--police-titre);
  font-size: 60px;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.m1-hero-content h1 em {
  color: var(--or);
  font-style: italic;
  font-weight: 400;
  display: block;
}
.m1-hero-content .dates {
  font-family: var(--police-titre);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 14px;
}
.m1-hero-content .role {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
}

/* SOCIAL RAIL */
.m1-social-rail {
  position: absolute;
  top: 130px; right: 14px;
  z-index: 14;
  display: flex; flex-direction: column;
  gap: 8px;
}
.m1-social-rail .sb {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
  position: relative;
}
.m1-social-rail .sb i { font-size: 17px; }
.m1-social-rail .sb:hover { background: var(--or); color: var(--noir); }
.m1-social-rail .sb .badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--or);
  color: var(--noir);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}
.m1-social-rail .sb.liked { background: color-mix(in srgb, var(--or) 95%, transparent); color: var(--noir); }
.m1-social-rail .sb.liked i { color: var(--noir); }

/* HERO PEEK — appel au scroll, transition propre */
.m1-hero-peek {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 12;
  background: var(--beige);
  padding: 18px 24px 16px;
  border-radius: 0;
  text-decoration: none;
  color: var(--noir);
  display: block;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 -20px 30px -10px rgba(0,0,0,0.25);
}
.m1-hero-peek:hover { background: #fff; }
/* Liseré doré séparateur en haut du peek */
.m1-hero-peek::before {
  content: '';
  position: absolute;
  top: 0; left: 24px;
  width: 36px; height: 2px;
  background: var(--or);
}
.m1-hero-peek .chapter {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 6px;
}
.m1-hero-peek .teaser {
  font-family: var(--police-titre);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--noir);
  letter-spacing: -0.005em;
}
.m1-hero-peek .teaser em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-hero-peek .hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gris-clair);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gris);
  display: flex; align-items: center; justify-content: space-between;
}
.m1-hero-peek .hint::after {
  content: '↓';
  font-size: 14px;
  animation: bounce 1.5s infinite;
  color: var(--or);
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* CARTE AUDIO prominente */
.m1-audio-card {
  margin: 30px 24px 10px;
  padding: 20px 22px;
  background: var(--noir);
  color: #fff;
  border-radius: 12px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35);
  text-decoration: none;
}
.m1-audio-card .m1-big-play {
  width: 54px; height: 54px;
  background: var(--or);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--noir);
  font-size: 20px;
  flex-shrink: 0;
}
.m1-audio-card .info { flex: 1; min-width: 0; }
.m1-audio-card .info .label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 4px;
}
.m1-audio-card .info .title {
  font-family: var(--police-titre);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 4px;
  color: #fff;
}
.m1-audio-card .info .duration { font-size: 12px; color: rgba(255,255,255,0.65); }

/* CARTE GÉNÉRIQUE (jeu, sport, parcours, enquête) */
.m1-action-card {
  margin: 30px 24px 10px;
  padding: 22px;
  background: var(--noir);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35);
}
.m1-action-card .lbl {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 8px;
}
.m1-action-card h2 {
  font-family: var(--police-titre);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
  color: #fff;
}
.m1-action-card h2 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-action-card p { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 14px; }
.m1-action-card .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin: 16px 0;
}
.m1-action-card .stats .s { text-align: center; }
.m1-action-card .stats .s .v { font-family: var(--police-titre); font-size: 26px; font-weight: 700; color: var(--or); line-height: 1; }
.m1-action-card .stats .s .l { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px; }
.m1-action-card .m1-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--or);
  color: var(--noir);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 8px;
}
.m1-action-card .m1-cta-btn:hover { background: #fff; }

/* SECTION HEAD */
.m1-section-head {
  padding: 30px 24px 14px;
}
.m1-section-head .chap {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
  font-weight: 600;
}
.m1-section-head h3 {
  font-family: var(--police-titre);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.m1-section-head h3 em { color: var(--or); font-style: italic; font-weight: 400; }

/* LIST CARDS */
.m1-list-cards { padding: 6px 24px 24px; }
.m1-list-card {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
  color: var(--noir);
  border: 1px solid var(--gris-clair);
  transition: all 0.2s;
}
.m1-list-card:hover { border-color: var(--or); transform: translateX(3px); }
.m1-list-card.done { background: color-mix(in srgb, var(--or) 8%, transparent); border-color: var(--or); }
.m1-list-card .ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--beige);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--or);
}
.m1-list-card .ico i { font-size: 20px; }
.m1-list-card.done .ico { background: var(--or); color: var(--noir); }
.m1-list-card .info { flex: 1; min-width: 0; }
.m1-list-card .info strong { display: block; font-family: var(--police-titre); font-size: 15px; font-weight: 700; line-height: 1.15; margin-bottom: 2px; }
.m1-list-card .info small { font-size: 11px; color: var(--gris); }
.m1-list-card .arrow { color: var(--or); flex-shrink: 0; }

/* LOCATION */
.m1-location {
  padding: 36px 24px 32px;
  background: var(--beige);
  border-top: 1px solid var(--gris-clair);
}
.m1-location .chap {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
  font-weight: 600;
}
.m1-location h3 {
  font-family: var(--police-titre);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.m1-location h3 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-mini-map {
  position: relative;
  height: 180px;
  background:
    radial-gradient(circle at 40% 50%, color-mix(in srgb, var(--or) 8%, transparent) 0%, color-mix(in srgb, var(--beige) 0%, transparent) 60%),
    url('/_images/index/parcours.jpg') center/cover;
  background-blend-mode: overlay;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.m1-mini-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--noir) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--noir) 4%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
}
.m1-mini-map .m1-pin-here {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  z-index: 5;
}
.m1-mini-map .m1-pin-here .marker {
  width: 36px; height: 36px;
  background: var(--or);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 3px #fff;
}
.m1-mini-map .m1-pin-here .marker i { font-size: 20px; }
.m1-mini-map .m1-pin-label {
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  background: var(--noir);
  color: #fff;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 3px;
  font-weight: 600;
}
.m1-mini-map .m1-pin-label::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--noir);
}
.m1-mini-map .m1-pin-near {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--noir) 50%, transparent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.m1-addr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
}
.m1-addr-row .m1-pin-em { font-size: 22px; color: var(--or); line-height: 1; }
.m1-addr-row .txt { flex: 1; font-size: 14px; color: var(--noir); line-height: 1.4; }
.m1-addr-row .txt strong { display: block; font-family: var(--police-titre); font-size: 15px; font-weight: 700; }
.m1-addr-row .txt small { font-size: 12px; color: var(--gris); }
.m1-addr-row a {
  color: var(--or);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.m1-addr-row a i { font-size: 12px; }

/* RELATED clair */
.m1-related {
  background: var(--ivoire);
  color: var(--noir);
  padding: 40px 24px 32px;
  border-top: 1px solid var(--gris-clair);
}
.m1-related .chap {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
  font-weight: 600;
}
.m1-related h3 {
  font-family: var(--police-titre);
  font-size: 26px;
  margin-bottom: 18px;
  font-weight: 700;
  color: var(--or);
  letter-spacing: -0.01em;
}
.m1-related h3 em { color: var(--or-sombre); font-style: italic; font-weight: 400; }
.m1-related ul { list-style: none; }
.m1-related li {
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-clair);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px;
  gap: 12px;
}
.m1-related li:last-child { border: 0; }
.m1-related li i { color: var(--or); font-size: 14px; flex-shrink: 0; }
.m1-related li a { color: var(--noir); text-decoration: none; flex: 1; font-family: var(--police-lecture); }
.m1-related li a:hover { color: var(--or); }

/* BOTTOM NAV — barre à COLONNES ÉGALES : tous les onglets tiennent, aucune
   icône coupée, pas de scroll horizontal (fini le centrage qui rognait les
   onglets des bords). Les colonnes se partagent la largeur à parts égales. */
.m1-bottom-nav {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--m1-col);
  background: var(--noir);                    /* menu sombre — suit la charte du compte */
  backdrop-filter: blur(22px);
  border-top: 2px solid var(--or);            /* accent doré = barre visible */
  box-shadow: 0 -6px 22px -8px color-mix(in srgb, var(--noir) 28%, transparent);
  padding: 9px 2px calc(9px + env(safe-area-inset-bottom));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);          /* colonnes égales, jamais de débordement */
  align-items: center;
  z-index: 40;
}
/* Styles communs des items (les liens portent la classe .m1-nav-item) */
.m1-bottom-nav a,
.m1-bottom-nav .m1-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  min-width: 0;                               /* indispensable pour l'ellipsis */
  padding: 2px 1px;
  text-decoration: none;
  color: rgba(255,255,255,0.88);              /* icônes + texte en blanc */
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}
.m1-bottom-nav a i,
.m1-bottom-nav .m1-nav-item i { font-size: clamp(22px, 6vw, 26px); line-height: 1; }
.m1-bottom-nav a span,
.m1-bottom-nav .m1-nav-item span {
  display: block; max-width: 100%;
  font-size: clamp(8px, 2.3vw, 10px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m1-bottom-nav a.active,
.m1-bottom-nav a.m1-active,
.m1-bottom-nav .m1-nav-item.m1-active { color: var(--or); }

/* AUDIO FAB — bouton play flottant supprimé (lecture via la carte audio inline) */
.m1-audio-fab { display: none !important; }
.m1-audio-fab {
  position: fixed;
  bottom: 84px;
  right: calc(50vw - (var(--m1-col) / 2) + 14px);
  z-index: 36;
  background: var(--noir);
  color: var(--or);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,0.4);
  cursor: pointer;
  border: 2px solid var(--or);
  transition: width 0.25s ease, border-radius 0.25s ease;
  overflow: hidden;
  text-decoration: none;
}
.m1-audio-fab i { font-size: 22px; }
.m1-audio-fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--or) 22%, transparent 22%);
  -webkit-mask: radial-gradient(circle, transparent 28px, #000 28px);
          mask: radial-gradient(circle, transparent 28px, #000 28px);
  opacity: 0.85;
}
.m1-audio-fab.expanded {
  width: auto;
  min-width: 240px;
  max-width: calc(var(--m1-col) - 28px);
  height: 56px;
  border-radius: 14px;
  padding: 8px 14px 0 6px;
  background: var(--noir);
  color: #fff;
  gap: 12px;
  justify-content: flex-start;
  position: fixed;
}
.m1-audio-fab.expanded::before { display: none; }
.m1-audio-fab, .m1-audio-fab * { text-decoration: none !important; }
.m1-audio-fab .m1-fab-info { display: none; flex: 1; min-width: 0; }
.m1-audio-fab.expanded .m1-fab-info { display: flex; flex-direction: column; justify-content: center; gap: 4px; line-height: 1.2; padding: 4px 0; }
.m1-audio-fab .m1-fab-info .t { font-family: var(--police-titre); font-size: 13px; font-weight: 700; color: #fff; }
.m1-audio-fab .m1-fab-info .time { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.5px; }
.m1-audio-fab .m1-progress-bar-bottom { display: none; }
.m1-audio-fab .m1-fab-close { display: none; width: 28px; height: 28px; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); cursor: pointer; }
.m1-audio-fab.expanded .m1-fab-close { display: flex; }
.m1-audio-fab .m1-fab-play {
  width: 44px; height: 44px;
  background: var(--or);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--noir);
  flex-shrink: 0;
}
.m1-audio-fab .m1-fab-play i { font-size: 18px; }
.m1-audio-fab:not(.expanded) .m1-fab-play { display: none; }
.m1-audio-fab:not(.expanded) > i { display: block; }
.m1-audio-fab.expanded > i { display: none; }
@media (max-width: 470px) { .m1-audio-fab { right: 14px; } }

/* SHEETS */
.m1-sheet {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: var(--m1-col);
  background: var(--beige);
  border-radius: 18px 18px 0 0;
  padding: 16px 22px 30px;
  z-index: 70;
  transition: transform 0.3s;
  box-shadow: 0 -20px 50px rgba(0,0,0,0.25);
}
.m1-sheet.m1-open { transform: translateX(-50%) translateY(0); }
.m1-sheet .handle { width: 36px; height: 4px; background: var(--gris-clair); border-radius: 4px; margin: 0 auto 14px; }
.m1-sheet h4 { font-family: var(--police-titre); font-size: 20px; font-weight: 700; margin-bottom: 14px; }

.m1-lang-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; text-decoration: none; color: var(--noir);
  font-size: 15px; border-bottom: 1px solid var(--gris-clair);
}
.m1-lang-list a:last-child { border: 0; }
.m1-lang-list a .m1-lang-row { display: flex; align-items: center; gap: 12px; }
.m1-lang-list a .code {
  display: inline-block;
  width: 32px; height: 22px;
  line-height: 22px;
  text-align: center;
  background: var(--noir);
  color: var(--or);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 4px;
}
.m1-lang-list a.current { color: var(--noir); font-weight: 600; }
.m1-lang-list a.current .check { color: var(--or); font-size: 16px; }
.m1-lang-list a:not(.current) .check { display: none; }

.m1-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m1-mode-option {
  background: #fff;
  border: 2px solid var(--gris-clair);
  border-radius: 14px;
  padding: 22px 16px;
  text-decoration: none;
  color: var(--noir);
  text-align: center;
}
.m1-mode-option.current { border-color: var(--or); background: color-mix(in srgb, var(--or) 6%, transparent); }
.m1-mode-option i { font-size: 34px; color: var(--or); margin-bottom: 10px; display: inline-block; }
.m1-mode-option strong { font-family: var(--police-titre); font-size: 17px; font-weight: 700; display: block; margin-bottom: 4px; }
.m1-mode-option small { font-size: 11px; color: var(--gris); line-height: 1.5; display: block; }

.m1-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.m1-share-grid a {
  background: #fff;
  border: 1px solid var(--gris-clair);
  padding: 14px 0;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--noir);
  font-size: 11px;
}
.m1-share-grid a i { display: block; font-size: 22px; margin-bottom: 4px; color: var(--noir); }
.m1-share-grid a:hover { background: var(--or); }

/* ============================================================================
   SPRINT 2.5 — Extras et alignement PHP/CSS
   Ajouts pour les classes utilisées par les fragments PHP mais
   manquantes dans la CSS originale.
   ============================================================================ */

/* Body + body-class scope */
body.m1-body { background: var(--cadre); }

/* AUDIO CARD — sous-classes verbeuses utilisées en PHP */
.m1-audio-card { text-decoration: none; }
.m1-audio-info { flex: 1; min-width: 0; }
.m1-audio-label {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 4px;
}
.m1-audio-title {
  display: block;
  font-family: var(--police-titre);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 4px;
  color: #fff;
}
.m1-audio-duration {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}

/* AUDIO FAB — états compact / étendu */
.m1-audio-fab .m1-fab-collapsed-icon { display: block; font-size: 22px; }
.m1-audio-fab.m1-expanded .m1-fab-collapsed-icon { display: none; }
.m1-audio-fab:not(.m1-expanded) .m1-fab-play,
.m1-audio-fab:not(.m1-expanded) .m1-fab-info,
.m1-audio-fab:not(.m1-expanded) .m1-fab-close { display: none; }
.m1-fab-t { font-family: var(--police-titre); font-size: 13px; font-weight: 700; color: #fff; }
.m1-fab-time { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.5px; }

/* HEADER — nom ville en doré */
.m1-app .m1-ville { display: flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; flex: 1; text-align: center; }
.m1-app .m1-ville strong { display: inline-block; background: rgba(0,0,0,0.45); backdrop-filter: blur(10px); padding: 7px 16px; border-radius: 10px; font-family: var(--police-titre); font-size: 16px; font-weight: 700; color: var(--or); letter-spacing: 0.5px; }
.m1-app .m1-ville small { font-size: 8px; color: rgba(255,255,255,0.45); letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }

/* SHEETS — backdrop pour fermer en cliquant à côté */
.m1-sheet-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--noir) 50%, transparent);
  z-index: 65;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.m1-sheet-backdrop.m1-open { opacity: 1; pointer-events: auto; }

/* MODE OPTIONS — adulte/enfant */
.m1-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m1-mode-option {
  background: #fff;
  border: 2px solid var(--gris-clair);
  border-radius: 14px;
  padding: 22px 16px;
  text-decoration: none;
  color: var(--noir);
  text-align: center;
}
.m1-mode-option.m1-current { border-color: var(--or); background: color-mix(in srgb, var(--or) 6%, transparent); }
.m1-mode-option i { font-size: 34px; color: var(--or); margin-bottom: 10px; display: inline-block; }
.m1-mode-option strong { font-family: var(--police-titre); font-size: 17px; font-weight: 700; display: block; margin-bottom: 4px; }
.m1-mode-option small { font-size: 11px; color: var(--gris); line-height: 1.5; display: block; }

/* SHARE QR */
.m1-share-qr { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gris-clair); display: flex; gap: 14px; align-items: center; }
.m1-share-qr .m1-qr-img { flex-shrink: 0; }
.m1-share-qr .m1-qr-img img { width: 64px; height: 64px; display: block; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--gris-clair); }
.m1-share-qr p { flex: 1; font-size: 12px; color: var(--gris); margin: 0; }
.m1-share-qr p strong { color: var(--noir); display: block; font-family: var(--police-titre); font-size: 14px; font-weight: 700; margin-bottom: 2px; }

/* HERO compact (page carte) — juste le titre, puis la carte.
   Sélecteur double-classe pour battre `.m1-hero { height:90vh }` qui vient plus loin. */
.m1-hero.m1-hero-compact { height: auto; min-height: 0; padding: 86px 24px 24px; }
.m1-hero-compact .m1-hero-content { position: relative; z-index: 2; bottom: auto; padding: 0; }
.m1-hero-compact .m1-hero-content h1 { font-size: 38px; margin-bottom: 10px; }
.m1-hero-compact .m1-kicker { margin-bottom: 10px; }
.m1-hero.m1-hero-compact::after { display: none; }

/* Marqueur numéroté (étape de parcours) */
.m1-leaflet-pin .m1-marker-num { font-family: var(--police-titre); font-weight: 700; font-size: 16px; line-height: 1; }

/* Repère "Vous êtes ici" — pastille bleue + halo pulsant */
.m1-userpin { position: relative; }
.m1-userpin-dot {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: #3b6ea8; border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.4);
}
.m1-userpin-pulse {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: rgba(59,110,168,0.45); border-radius: 50%;
  animation: m1-userpulse 1.8s ease-out infinite;
}
@keyframes m1-userpulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ARTICLE — chapitre */
.m1-article { padding: 30px 24px 50px; background: var(--beige); }
.m1-article .m1-chap { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--or); margin-bottom: 12px; font-weight: 600; }
.m1-article h2 { font-family: var(--police-titre); font-size: 28px; font-weight: 700; line-height: 1.18; margin-bottom: 18px; letter-spacing: -0.01em; }
.m1-article h2 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-article p { font-family: var(--police-lecture); font-size: 17px; line-height: 1.75; color: var(--texte); margin-bottom: 18px; }
.m1-article p:first-of-type:first-letter { font-family: var(--police-titre); font-size: 56px; font-weight: 900; color: var(--or); float: left; line-height: 0.85; padding: 6px 8px 0 0; }

/* ONGLET version de lecture (Adulte / Version enfant) — au-dessus de la bio */
.m1-mode-tabs {
  display: flex; gap: 8px; margin-bottom: 22px;
  background: #e7e1d6; padding: 4px; border-radius: 12px;
}
.m1-mode-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 8px; border-radius: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
  text-decoration: none; color: var(--gris);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.m1-mode-tab i { font-size: 16px; }
.m1-mode-tab.m1-active { background: var(--beige); color: var(--noir); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.m1-mode-tab-kid.m1-active { color: #b06a00; }
.m1-mode-tab-kid.m1-active i { color: #e0900f; }
.m1-mode-tab:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
/* En version enfant, on neutralise la lettrine "magazine" (plus lisible pour un enfant) */
.m1-article.m1-kid p:first-of-type:first-letter { font-size: inherit; float: none; color: inherit; padding: 0; font-family: inherit; font-weight: inherit; }

/* CARROUSEL PHOTOS */
.m1-photo-carousel { padding: 24px 0 28px; background: var(--beige); }
.m1-photo-carousel .m1-head { padding: 0 24px 18px; }
.m1-photo-carousel h3 { font-family: var(--police-titre); font-size: 20px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.m1-photo-carousel .m1-count { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); display: block; }
.m1-carousel-track { display: flex; gap: 12px; overflow-x: auto; padding: 0 24px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.m1-carousel-track::-webkit-scrollbar { display: none; }
.m1-carousel-item { flex: 0 0 280px; scroll-snap-align: start; position: relative; }
.m1-carousel-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 4px; display: block; }
.m1-carousel-item .m1-cap { position: absolute; bottom: 10px; left: 10px; right: 10px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); color: #fff; padding: 6px 10px; font-size: 11px; border-radius: 2px; font-style: italic; }
.m1-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.m1-carousel-dots .m1-dot { width: 6px; height: 6px; padding: 0; border: none; background: var(--gris-clair); border-radius: 50%; cursor: pointer; transition: width 0.2s ease, background 0.2s ease; }
.m1-carousel-dots .m1-dot:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.m1-carousel-dots .m1-dot.m1-active { background: var(--or); width: 18px; border-radius: 4px; }

/* Viewport + flèches précédent/suivant (navigation desktop). Masquées sur
   mobile où l'on navigue au swipe. */
.m1-carousel-viewport { position: relative; }
.m1-carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  color: var(--bleu, #1e4892);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.m1-carousel-arrow span { display: block; margin-top: -3px; }
.m1-carousel-prev { left: 12px; }
.m1-carousel-next { right: 12px; }
.m1-carousel-arrow:hover { background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.m1-carousel-arrow:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.m1-carousel-arrow:disabled { opacity: 0.3; cursor: default; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
@media (min-width: 768px) {
  .m1-carousel-arrow { display: flex; }
}

/* LOCATION addr-txt */
.m1-addr-txt { flex: 1; font-size: 14px; color: var(--noir); line-height: 1.4; }
.m1-addr-txt strong { display: block; font-family: var(--police-titre); font-size: 15px; font-weight: 700; }
.m1-addr-txt small { font-size: 12px; color: var(--gris); }

/* MARKER Leaflet custom */
.m1-leaflet-pin .m1-marker {
  width: 36px; height: 36px;
  background: var(--or);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 3px #fff;
}
.m1-leaflet-pin .m1-marker i { font-size: 20px; }

/* RELATED — list */
.m1-related ul { list-style: none; }
.m1-related li { padding: 14px 0; border-bottom: 1px solid var(--gris-clair); display: flex; justify-content: space-between; align-items: center; font-size: 15px; gap: 12px; }
.m1-related li:last-child { border: 0; }
.m1-related li i { color: var(--or); font-size: 14px; flex-shrink: 0; }
.m1-related li a { color: var(--noir); text-decoration: none; flex: 1; font-family: var(--police-lecture); }
.m1-related li a:hover { color: var(--or); }

/* BOTTOM NAV — items : layout géré par .m1-bottom-nav (grille colonnes égales).
   Ici uniquement les états (actif / désactivé). */
.m1-nav-item.m1-active { color: var(--or); }
.m1-nav-item.m1-active i { transform: translateY(-1px); }
.m1-nav-item.m1-disabled { opacity: 0.4; pointer-events: none; }

/* LANG LIST extras */
.m1-lang-list a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; text-decoration: none; color: var(--noir); font-size: 15px; border-bottom: 1px solid var(--gris-clair); }
.m1-lang-list a:last-child { border: 0; }
.m1-lang-list a.m1-current { font-weight: 600; }
.m1-lang-list a:not(.m1-current) .m1-check { display: none; }
.m1-lang-list a .m1-lang-row { display: flex; align-items: center; gap: 12px; }
.m1-lang-list a .m1-code { display: inline-block; width: 32px; height: 22px; line-height: 22px; text-align: center; background: var(--noir); color: var(--or); font-size: 10px; font-weight: 700; letter-spacing: 1px; border-radius: 4px; }
.m1-lang-list a .m1-check { color: var(--or); font-size: 16px; }

/* ============================================================================
   SOUS-MODES : jeu, carte, enquête, sport, parcours
   ============================================================================ */

/* JEU — quiz card */
.m1-quiz { margin: 24px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 14px; padding: 22px; }
.m1-quiz-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); font-weight: 600; margin-bottom: 14px; }
.m1-quiz-badge { background: var(--or); color: var(--noir); padding: 4px 10px; border-radius: 4px; font-weight: 700; }
.m1-quiz h2 { font-family: var(--police-titre); font-size: 22px; font-weight: 700; margin-bottom: 12px; line-height: 1.25; }
.m1-quiz h2 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-answers { display: flex; flex-direction: column; gap: 10px; }
.m1-answers a { padding: 14px 18px; border: 1.5px solid var(--gris-clair); border-radius: 10px; text-decoration: none; color: var(--noir); font-size: 15px; display: flex; align-items: center; gap: 14px; transition: all 0.2s; }
.m1-answers a:hover { border-color: var(--or); background: color-mix(in srgb, var(--or) 4%, transparent); }
.m1-letter { width: 28px; height: 28px; border-radius: 50%; background: var(--beige); color: var(--or); display: flex; align-items: center; justify-content: center; font-family: var(--police-titre); font-weight: 700; font-size: 13px; flex-shrink: 0; }

/* PROGRESS BAR */
.m1-progress-bar-row { margin: 14px 24px 20px; }
.m1-pb-info { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; font-weight: 600; }
.m1-pb-bar { height: 6px; background: var(--gris-clair); border-radius: 3px; overflow: hidden; }
.m1-pb-bar > div { height: 100%; background: var(--or); }

/* ACTION CARD (jeu, enquête, sport, parcours) */
.m1-action-card { margin: 30px 24px 10px; padding: 22px; background: var(--noir); color: #fff; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35); }
.m1-ac-lbl { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--or); font-weight: 600; margin-bottom: 8px; }
.m1-action-card h2 { font-family: var(--police-titre); font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 14px; color: #fff; }
.m1-action-card h2 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-action-card p { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 14px; }
.m1-ac-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); margin: 16px 0; }
.m1-stat { text-align: center; }
.m1-stat-v { font-family: var(--police-titre); font-size: 26px; font-weight: 700; color: var(--or); line-height: 1; }
.m1-stat-l { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px; }

/* CARTE — big map */
.m1-big-map { position: relative; height: 380px; background: #d4e3f7; border-bottom: 1px solid var(--gris-clair); overflow: hidden; }
.m1-filters { padding: 16px 24px; background: var(--beige); border-bottom: 1px solid var(--gris-clair); overflow-x: auto; display: flex; gap: 8px; }
.m1-chip { flex-shrink: 0; padding: 8px 14px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 24px; font-size: 12px; letter-spacing: 0.5px; color: var(--noir); text-decoration: none; font-weight: 500; }
.m1-chip.m1-active { background: var(--noir); color: #fff; border-color: var(--noir); }
.m1-chip i { margin-right: 4px; }

/* SECTION HEAD */
.m1-section-head { padding: 30px 24px 14px; }
.m1-section-head .m1-chap { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--or); margin-bottom: 10px; font-weight: 600; }
.m1-section-head h3 { font-family: var(--police-titre); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.m1-section-head h3 em { color: var(--or); font-style: italic; font-weight: 400; }

/* LIST CARDS */
.m1-list-cards { padding: 6px 24px 24px; }
.m1-list-card { background: #fff; border-radius: 12px; margin-bottom: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--noir); border: 1px solid var(--gris-clair); transition: all 0.2s; }
.m1-list-card:hover { border-color: var(--or); transform: translateX(3px); }
.m1-list-card.m1-done { background: color-mix(in srgb, var(--or) 8%, transparent); border-color: var(--or); }
.m1-list-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--beige); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--or); }
.m1-list-ico i { font-size: 20px; }
.m1-list-card.m1-done .m1-list-ico { background: var(--or); color: var(--noir); }
.m1-list-info { flex: 1; min-width: 0; }
.m1-list-info strong { display: block; font-family: var(--police-titre); font-size: 15px; font-weight: 700; line-height: 1.15; margin-bottom: 2px; }
.m1-list-info small { font-size: 11px; color: var(--gris); }
.m1-list-arrow { color: var(--or); flex-shrink: 0; }

/* ENQUÊTE — indices + suspects */
.m1-indices-section { padding: 26px 0 20px; background: var(--ivoire); border-bottom: 1px solid var(--gris-clair); }
.m1-indices-head { padding: 0 24px 14px; display: flex; justify-content: space-between; align-items: center; }
.m1-indices-head h3 { font-family: var(--police-titre); font-size: 20px; font-weight: 700; }
.m1-indices-head h3 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-indices-head .m1-count { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--or); font-weight: 600; background: color-mix(in srgb, var(--or) 10%, transparent); padding: 4px 10px; border-radius: 4px; }
.m1-indices-track { display: flex; gap: 12px; overflow-x: auto; padding: 0 24px 8px; scroll-snap-type: x mandatory; }
.m1-indices-track::-webkit-scrollbar { display: none; }
.m1-indice { flex: 0 0 220px; scroll-snap-align: start; background: #fff; border: 1px solid var(--gris-clair); border-radius: 12px; padding: 16px; position: relative; }
.m1-indice.m1-locked { background: var(--beige); border-style: dashed; opacity: 0.6; }
.m1-indice .m1-n { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); font-weight: 600; margin-bottom: 8px; }
.m1-indice h4 { font-family: var(--police-titre); font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; }
.m1-indice p { font-size: 12px; color: var(--gris); line-height: 1.5; }
.m1-lock { position: absolute; top: 14px; right: 14px; color: var(--gris); font-size: 14px; }

.m1-suspects-grid { padding: 8px 24px 28px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.m1-suspect { background: #fff; border: 2px solid var(--gris-clair); border-radius: 12px; padding: 14px 8px; text-align: center; text-decoration: none; color: var(--noir); transition: all 0.2s; }
.m1-suspect:hover, .m1-suspect.m1-selected { border-color: var(--or); background: color-mix(in srgb, var(--or) 5%, transparent); }
.m1-suspect-ph { display: block; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--gris-clair); }
.m1-suspect-empty { background: var(--beige); display: flex; align-items: center; justify-content: center; color: var(--gris); font-size: 28px; }
.m1-suspect strong { font-family: var(--police-titre); font-size: 13px; font-weight: 700; line-height: 1.1; display: block; margin-bottom: 2px; }
.m1-suspect small { font-size: 10px; color: var(--gris); letter-spacing: 0.5px; }

/* SPORT — vidéo + stats */
.m1-exo-video { margin: 24px 24px 12px; position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: var(--beige); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.3); }
.m1-exo-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.55)); }
.m1-play-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--noir); z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.m1-play-circle i { font-size: 28px; padding-left: 4px; }
.m1-exo-video .m1-duration { position: absolute; bottom: 14px; right: 14px; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 10px; font-size: 11px; letter-spacing: 1px; border-radius: 4px; z-index: 5; font-weight: 600; }
.m1-exo-video .m1-caption { position: absolute; bottom: 14px; left: 14px; right: 80px; color: #fff; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; z-index: 5; }
.m1-exo-desc { padding: 0 24px 22px; }
.m1-exo-desc h2 { font-family: var(--police-titre); font-size: 26px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.15; }
.m1-exo-desc h2 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-niveau { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); font-weight: 600; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.m1-niveau .m1-dots { display: flex; gap: 3px; }
.m1-niveau .m1-d { width: 6px; height: 6px; background: var(--gris-clair); border-radius: 50%; }
.m1-niveau .m1-d.m1-on { background: var(--or); }
.m1-exo-stats { margin: 0 24px 24px; padding: 20px; background: var(--ivoire); border: 1px solid var(--gris-clair); border-radius: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.m1-exo-stats .m1-stat { text-align: center; }
.m1-exo-stats .m1-stat i { color: var(--or); font-size: 22px; display: block; margin-bottom: 6px; }
.m1-exo-stats .m1-stat-v { font-family: var(--police-titre); font-size: 20px; font-weight: 700; line-height: 1; color: var(--noir); }
.m1-exo-stats .m1-stat-l { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris); margin-top: 4px; font-weight: 600; }

/* PARCOURS — progression + timeline */
.m1-prog-card { margin: 24px; padding: 22px; background: var(--noir); color: #fff; border-radius: 14px; }
.m1-prog-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.m1-prog-head h2 { font-family: var(--police-titre); font-size: 22px; font-weight: 700; line-height: 1.1; margin-bottom: 0; color: #fff; }
.m1-pct { font-family: var(--police-titre); font-size: 32px; font-weight: 700; color: var(--or); line-height: 1; }
.m1-prog-bar { height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.m1-prog-bar > div { height: 100%; background: var(--or); }
.m1-prog-meta { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.65); }

.m1-etapes { padding: 0 24px 20px; position: relative; }
.m1-etape { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; text-decoration: none; color: var(--noir); position: relative; }
.m1-etape::before { content: ''; position: absolute; left: 19px; top: 50px; bottom: -10px; width: 2px; background: var(--gris-clair); }
.m1-etape:last-child::before { display: none; }
.m1-etape-pin { width: 40px; height: 40px; border-radius: 50%; background: var(--beige); color: var(--gris); display: flex; align-items: center; justify-content: center; font-family: var(--police-titre); font-weight: 700; flex-shrink: 0; border: 2px solid var(--gris-clair); z-index: 2; position: relative; }
.m1-etape.m1-done .m1-etape-pin { background: var(--or); color: var(--noir); border-color: var(--or); }
.m1-etape.m1-current .m1-etape-pin { background: var(--noir); color: var(--or); border-color: var(--or); box-shadow: 0 0 0 4px color-mix(in srgb, var(--or) 20%, transparent); }
.m1-etape-body { flex: 1; padding-top: 4px; }
.m1-etape-body strong { display: block; font-family: var(--police-titre); font-size: 16px; font-weight: 700; line-height: 1.2; }
.m1-etape-body small { font-size: 12px; color: var(--gris); display: block; margin-top: 2px; }
.m1-etape.m1-current .m1-etape-body strong { color: var(--or); }
.m1-etape.m1-done .m1-etape-body strong { color: var(--gris); }
.m1-etape-arrow { color: var(--gris); font-size: 16px; padding-top: 8px; }
.m1-etape.m1-current .m1-etape-arrow { color: var(--or); }

/* CTA BTN */
.m1-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--or); color: var(--noir); text-decoration: none; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; border-radius: 8px; }
/* Hover : on assombrit l'or (jamais blanc → sur les cartes blanches le bouton
   se confondait avec le fond et semblait disparaître). */
.m1-cta-btn:hover { background: var(--or-sombre); color: var(--noir); }

/* SOCIAL RAIL — bouton like actif */
.m1-sb.m1-active { background: var(--rouge) !important; color: #fff !important; }  /* cœur « j'aime » : pas une erreur */

/* BARRE DE LANGUES (sous la carte audio) */
.m1-langbar {
  margin: 0 24px 8px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.m1-langbar-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gris); font-weight: 600;
}
.m1-langbar-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.m1-langbar-chip {
  min-width: 40px; text-align: center;
  padding: 7px 13px; border-radius: 9px;
  border: 1px solid var(--gris-clair); background: #fff;
  color: var(--noir); text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  transition: all 0.2s;
}
.m1-langbar-chip:hover { border-color: var(--or); color: var(--or-sombre); }
.m1-langbar-chip.is-current { background: var(--noir); color: var(--or); border-color: var(--noir); }

/* POPUP de marqueur (carte) — photo + nom + lien */
.leaflet-popup-content { margin: 0 !important; width: auto !important; }
.leaflet-popup-content-wrapper { border-radius: 12px !important; padding: 0 !important; overflow: hidden; }
.m1-mappop { width: 200px; }
.m1-mappop-img { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--gris-clair); }
.m1-mappop-name { font-family: var(--police-titre); font-weight: 700; font-size: 15px; color: var(--noir); padding: 10px 12px 4px; line-height: 1.2; }
.m1-mappop-link { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 12px; color: var(--or-sombre); text-decoration: none; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.m1-mappop-link:hover { color: var(--or); }

/* Vignette photo dans les cartes de liste (carte + poursuivre la visite) */
.m1-list-ico-photo { padding: 0; overflow: hidden; }
.m1-list-ico-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m1-list-info small i { font-size: 11px; color: var(--or); margin-right: 2px; }

/* Distance affichée dans le bouton Itinéraire (mini-carte fiche) */
.m1-route-info { display: none; margin: 0 6px; color: var(--gris); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Indicateur de suivi live actif (bouton Itinéraire) */
.m1-addr-row a.m1-tracking { color: var(--succes); }
.m1-addr-row a.m1-tracking::before {
  content: '●'; margin-right: 5px; color: var(--succes);
  animation: m1-pulse 1.2s ease-in-out infinite;
}
@keyframes m1-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* BANDEAU DE CONSENTEMENT RGPD */
.m1-consent {
  position: fixed; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: var(--m1-col);
  z-index: 80;
  background: var(--noir); color: #fff;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 30px rgba(0,0,0,0.4);
}
.m1-consent[hidden] { display: none; }
.m1-consent-txt { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0 0 12px; }
.m1-consent-link { color: var(--or-clair); text-decoration: underline; }
.m1-consent-actions { display: flex; gap: 10px; justify-content: flex-end; }
.m1-consent-btn {
  padding: 9px 18px; border-radius: 8px; font-family: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; border: 1px solid transparent;
}
.m1-consent-refuse { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.m1-consent-refuse:hover { border-color: #fff; }
.m1-consent-accept { background: var(--or); color: var(--noir); }
.m1-consent-accept:hover { background: var(--or-clair); }

/* Page Politique de confidentialité — bloc d'infos */
.m1-doc-meta { background: #fff; border: 1px solid var(--gris-clair); border-radius: 12px; padding: 16px 18px; margin: 0 24px 20px; }
.m1-doc-meta p { font-family: var(--police-lecture); font-size: 14px; line-height: 1.6; color: var(--texte); margin: 0 0 6px; }
.m1-doc-meta p:last-child { margin-bottom: 0; }
.m1-article h3 { font-family: var(--police-titre); font-size: 19px; font-weight: 700; margin: 26px 0 8px; }
.m1-article ul.m1-doc-list { margin: 0 0 16px; padding-left: 20px; }
.m1-article ul.m1-doc-list li { font-family: var(--police-lecture); font-size: 15px; line-height: 1.6; color: var(--texte); margin-bottom: 6px; }
.m1-doc-back { display: inline-flex; align-items: center; gap: 8px; margin: 8px 24px 50px; color: var(--or-sombre); text-decoration: none; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }

/* ============================================================================
   SPRINT 2.6 — Correctif d'alignement classes PHP ↔ CSS
   ----------------------------------------------------------------------------
   Les fragments PHP émettent des classes préfixées m1- (m1-app, m1-back,
   m1-pill, m1-square, m1-right, m1-hero, m1-kicker, m1-dates, m1-role, m1-sb,
   m1-liked, m1-handle), alors que la CSS d'origine ciblait des classes courtes
   (.app, .back, .pill, .hero, .sb…). Faute de correspondance, le header, la
   section héro et le rail social ne recevaient AUCUN style → liens bleus par
   défaut empilés (bug mise en page f.php / Modèle 1). Ce bloc remappe les
   règles manquantes en reprenant les valeurs visuelles d'origine.
   ============================================================================ */

/* HEADER — barre fixe (classe m1-app) */
.m1-app {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--m1-col);
  z-index: 30;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.42);
}
.m1-back {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 18px;
  flex-shrink: 0;
}
.m1-back i { line-height: 1; }
.m1-right { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.m1-pill {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.m1-pill i { font-size: 16px; line-height: 1; }
.m1-pill.m1-square { width: 40px; padding: 0; justify-content: center; }

/* HERO — section photo (classe m1-hero, manquante) */
.m1-hero {
  position: relative;
  height: 90vh;
  min-height: 480px;
  background-color: var(--noir);
  background-size: cover;
  background-position: center;
}
.m1-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.88));
}
.m1-kicker {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 12px;
}
.m1-kicker::before { content: ''; width: 32px; height: 1px; background: var(--or-clair); }
.m1-dates {
  font-family: var(--police-titre);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 14px;
}
.m1-role { font-size: 14px; color: rgba(255,255,255,0.78); }

/* SOCIAL RAIL — boutons (classe m1-sb / m1-liked émise par le PHP) */
.m1-sb {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
  position: relative;
}
.m1-sb i { font-size: 17px; }
.m1-sb:hover { background: var(--or); color: var(--noir); }
.m1-liked { background: color-mix(in srgb, var(--or) 95%, transparent); color: var(--noir); }
.m1-liked i { color: var(--noir); }

/* SHEETS — poignée de glissement (classe m1-handle) */
.m1-handle { width: 36px; height: 4px; background: var(--gris-clair); border-radius: 4px; margin: 0 auto 14px; }

/* ============================================================================
   RESPONSIVE — paysage (smartphone tourné)
   En paysage la hauteur d'écran est faible : un héro à min-height 480px
   forçait un long scroll vertical (impression de « non responsive »).
   On laisse le héro remplir l'écran et on réduit le décalage du contenu.
   ============================================================================ */
@media (orientation: landscape) and (max-height: 600px) {
  .m1-hero { height: 100vh; min-height: 0; }
  .m1-hero-content { bottom: 80px; }
  .m1-social-rail { top: 76px; }
}

/* ============================================================================
   JEU — Formulaire d'inscription lead (RGPD) + boutons de réponse
   ============================================================================ */
.m1-lead { margin: 24px; }
.m1-lead-head { margin-bottom: 20px; }
.m1-lead-head h2 { font-family: var(--police-titre); font-size: 26px; font-weight: 700; line-height: 1.2; margin: 10px 0; }
.m1-lead-head h2 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-lead-intro { color: var(--gris); font-size: 15px; line-height: 1.55; }

.m1-lead-errors { background: color-mix(in srgb, var(--erreur) 7%, transparent); border: 1px solid var(--erreur); border-radius: 10px; padding: 12px 16px 12px 18px; margin-bottom: 18px; }
.m1-lead-errors ul { margin: 0; padding-left: 18px; }
.m1-lead-errors li { color: var(--erreur); font-size: 14px; line-height: 1.5; }

.m1-lead-form { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 14px; padding: 22px; }
.m1-field { display: flex; flex-direction: column; gap: 6px; }
.m1-field-row { display: flex; gap: 14px; }
.m1-field-row .m1-field { flex: 1; }
.m1-field label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.m1-req { color: var(--or); }
.m1-field input[type="email"],
.m1-field input[type="text"] { width: 100%; padding: 13px 14px; border: 1.5px solid var(--gris-clair); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--noir); background: var(--ivoire); transition: border-color 0.2s; }
.m1-field input:focus { outline: none; border-color: var(--or); background: #fff; }

.m1-consent-field { margin-top: 2px; }
.m1-check { flex-direction: row; align-items: flex-start; gap: 12px; cursor: pointer; }
.m1-check input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--or); }
.m1-check span { font-size: 13.5px; line-height: 1.5; color: var(--gris); text-transform: none; letter-spacing: 0; font-weight: 400; }
.m1-check a { color: var(--or-sombre); }

.m1-lead-submit { justify-content: center; border: none; cursor: pointer; font-family: inherit; padding: 15px 22px; }
.m1-lead-legal { font-size: 12px; color: var(--gris); line-height: 1.5; margin: 0; }

/* Boutons de réponse (aperçu Phase 3 — désactivés en attendant le moteur Phase 4) */
.m1-answer { width: 100%; text-align: left; padding: 14px 18px; border: 1.5px solid var(--gris-clair); border-radius: 10px; background: #fff; color: var(--noir); font-size: 15px; font-family: inherit; display: flex; align-items: center; gap: 14px; transition: all 0.2s; cursor: pointer; }
.m1-answer:not(:disabled):hover { border-color: var(--or); background: color-mix(in srgb, var(--or) 4%, transparent); }
.m1-answer:disabled { opacity: 0.6; cursor: default; }
.m1-quiz-soon { margin-top: 14px; font-size: 13px; color: var(--gris); line-height: 1.5; }

@media (max-width: 420px) {
  .m1-field-row { flex-direction: column; gap: 16px; }
}

/* ============================================================================
   JEU — Moteur (Phase 4) : résultat, score, indices, trésor
   ============================================================================ */
/* Boutons réponse cliquables (état 'ask') */
.m1-answers .m1-answer { width: 100%; text-align: left; }
.m1-answer { cursor: pointer; }

/* Carte de résultat (bonne / mauvaise réponse) */
.m1-quiz-result { border-width: 1.5px; }
.m1-result-ok { border-color: var(--succes); }
.m1-result-ko { border-color: var(--erreur); }
.m1-result-head { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.m1-result-ok .m1-result-head { color: var(--succes); }
.m1-result-ko .m1-result-head { color: var(--erreur); }
.m1-result-head i { font-size: 22px; }
.m1-result-explication { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gris-clair); }
.m1-result-explication p { margin: 6px 0 0; line-height: 1.5; }
.m1-result-gain { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gris-clair); }
.m1-gain-lbl { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.m1-gain-val { font-family: var(--police-titre); font-size: 26px; font-weight: 700; color: var(--or-sombre); }

/* Tableau de score ville */
.m1-score-grid { display: flex; gap: 12px; margin: 16px 24px; }
.m1-score-cell { flex: 1; background: #fff; border: 1px solid var(--gris-clair); border-radius: 12px; padding: 16px; text-align: center; }
.m1-score-lbl { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); font-weight: 600; margin-bottom: 6px; }
.m1-score-cell strong { font-family: var(--police-titre); font-size: 30px; font-weight: 700; color: var(--noir); display: block; }
.m1-score-cell strong small { font-size: 15px; color: var(--gris); font-weight: 400; margin-left: 2px; }
.m1-score-unit { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--or-sombre); }

/* Indices fil rouge */
.m1-indices { margin: 16px 24px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 12px; padding: 18px 20px; }
.m1-indices ul { margin: 8px 0 0; padding-left: 18px; }
.m1-indices li { font-size: 15px; line-height: 1.6; color: var(--noir); }

/* Code du coffre débloqué */
.m1-treasure { margin: 16px 24px; background: var(--noir); color: var(--beige); border-radius: 14px; padding: 24px; text-align: center; }
.m1-treasure-tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); font-weight: 700; }
.m1-treasure-code { font-family: var(--police-titre); font-size: 44px; font-weight: 700; letter-spacing: 6px; color: var(--or-clair); margin: 8px 0 12px; }
.m1-treasure-where { font-size: 14px; line-height: 1.5; color: var(--beige); }
.m1-treasure-where strong { color: var(--or-clair); }
.m1-treasure-msg { font-size: 13px; color: var(--gris-clair); margin-top: 10px; font-style: italic; }

/* Objectif (code pas encore atteint) */
.m1-objectif { margin: 16px 24px; padding: 14px 18px; background: color-mix(in srgb, var(--or) 8%, transparent); border: 1px dashed var(--or); border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--noir); }
.m1-objectif strong { color: var(--or-sombre); }

/* Actions bas de page jeu */
.m1-action-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.m1-action-btns .m1-cta-btn { flex: 1 1 0; min-width: 160px; justify-content: center; }
.m1-cta-ghost { background: transparent; border: 1.5px solid var(--or); color: var(--or-clair); }
.m1-cta-ghost:hover { background: color-mix(in srgb, var(--or) 12%, transparent); }

/* ============================================================================
   CLUEDO / ENQUÊTE (Phase 5) — accent dynamique via --clu (couleur du clujeu)
   ============================================================================ */
.m1-enq-empty { padding: 48px 24px; text-align: center; color: var(--gris); font-style: italic; }

.m1-enq-intro { margin: 22px 24px; padding: 22px; background: #fff; border: 1px solid var(--gris-clair); border-left: 4px solid var(--clu, #9f4422); border-radius: 14px; }
.m1-enq-intro h2 { font-family: var(--police-titre); font-size: 24px; font-weight: 700; line-height: 1.2; margin: 8px 0 10px; }
.m1-enq-intro h2 em { color: var(--clu, #9f4422); font-style: italic; font-weight: 400; }
.m1-enq-intro p { font-size: 14.5px; line-height: 1.6; color: var(--gris); margin-bottom: 8px; }
.m1-enq-stats { display: flex; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gris-clair); }
.m1-enq-stats .m1-stat { flex: 1; }
.m1-enq-stats .m1-stat-v { color: var(--clu, #9f4422); }
.m1-enq-stats .m1-stat-l { color: var(--gris); }

.m1-enq-photo { width: 100%; border-radius: 10px; margin-bottom: 14px; display: block; }
.m1-enq-q { font-size: 15px; line-height: 1.6; color: var(--noir); margin-bottom: 10px; }
.m1-enq-hint { font-size: 13px; line-height: 1.5; color: var(--gris); font-style: italic; }
.m1-enq-hint i { color: var(--clu, #9f4422); font-style: normal; }

.m1-clu-badge { background: var(--clu, #9f4422); color: #fff; }
.m1-clu-answer:not(:disabled):hover { border-color: var(--clu, #9f4422); background: color-mix(in srgb, var(--clu, #9f4422) 5%, transparent); }
.m1-clu-answer .m1-letter { color: var(--clu, #9f4422); }
.m1-clu-btn { background: var(--clu, #9f4422); color: #fff; border: none; }
.m1-clu-btn:hover { filter: brightness(1.1); background: var(--clu, #9f4422); }

/* Carte « nouvel indice » */
.m1-indice-card { margin: 16px 24px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 14px; padding: 20px; }
.m1-indice-card h3 { font-family: var(--police-titre); font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.m1-indice-card p { font-size: 14px; line-height: 1.6; color: var(--gris); margin-bottom: 6px; }

/* Liste des indices collectés */
.m1-indices-list { padding: 0 24px; display: flex; flex-direction: column; gap: 10px; }
.m1-indice-mini { display: flex; gap: 14px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 12px; padding: 14px 16px; }
.m1-indice-n { font-family: var(--police-titre); font-size: 22px; font-weight: 700; color: var(--clu, #9f4422); line-height: 1; flex-shrink: 0; }
.m1-indice-mini strong { display: block; font-family: var(--police-titre); font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.m1-indice-mini p { font-size: 13px; color: var(--gris); line-height: 1.5; }

/* Suspects cliquables (radio caché) + état sélectionné */
.m1-quiz .m1-suspects-grid { padding: 8px 0 0; }
.m1-suspect { position: relative; cursor: pointer; display: block; }
.m1-suspect input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m1-suspect-card { display: block; }
.m1-suspect:has(input:checked) { border-color: var(--clu, #9f4422); background: color-mix(in srgb, var(--clu, #9f4422) 6%, transparent); box-shadow: 0 0 0 2px var(--clu, #9f4422) inset; }
.m1-suspects-ref .m1-suspect { cursor: default; }

.m1-accuse-form { margin-top: 6px; }
.m1-accuse-submit { width: 100%; justify-content: center; margin-top: 16px; }

/* Énigme type 1 (intrus images) */
.m1-enq-form { display: block; }
.m1-intrus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.m1-intrus { position: relative; cursor: pointer; display: block; }
.m1-intrus input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m1-intrus-card { display: block; width: 100%; aspect-ratio: 1/1; border-radius: 12px; background-size: cover; background-position: center; border: 2px solid var(--gris-clair); transition: all 0.15s; }
.m1-intrus:has(input:checked) .m1-intrus-card { border-color: var(--clu, #9f4422); box-shadow: 0 0 0 3px var(--clu, #9f4422) inset; }
.m1-intrus-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--clu, #9f4422); color: #fff; display: none; align-items: center; justify-content: center; font-size: 15px; }
.m1-intrus:has(input:checked) .m1-intrus-check { display: flex; }
.m1-enq-submit { width: 100%; justify-content: center; margin-top: 4px; }

/* Énigme type 2 (mot caché — saisie texte) */
.m1-enq-input { width: 100%; padding: 15px 16px; border: 1.5px solid var(--gris-clair); border-radius: 10px; font-size: 17px; font-family: inherit; text-align: center; color: var(--noir); background: var(--ivoire); margin-bottom: 14px; }
.m1-enq-input:focus { outline: none; border-color: var(--clu, #9f4422); background: #fff; }

/* Verdict */
.m1-verdict { margin: 16px 24px; border-radius: 14px; padding: 26px 22px; text-align: center; color: #fff; }
.m1-verdict-win { background: var(--succes); }
.m1-verdict-lose { background: var(--noir); }
.m1-verdict-tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; opacity: 0.85; }
.m1-verdict h2 { font-family: var(--police-titre); font-size: 26px; font-weight: 700; margin: 10px 0; line-height: 1.2; }
.m1-verdict p { font-size: 14.5px; line-height: 1.6; opacity: 0.95; margin-bottom: 8px; }
.m1-verdict-sol { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.25); text-align: left; }
.m1-verdict-sol strong { color: var(--or-clair); }
.m1-verdict-score { margin-top: 16px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.m1-verdict-score strong { font-family: var(--police-titre); font-size: 22px; color: var(--or-clair); }

/* ============================================================================
   SPORT & SANTÉ + MODE ENFANT (Phase 6)
   ============================================================================ */
.m1-sport { padding: 24px 24px 6px; }
.m1-sport-titre { font-family: var(--police-titre); font-size: 26px; font-weight: 700; line-height: 1.15; margin: 6px 0 14px; }
/* Wrapper vidéo 16:9 (réutilisé par la version enfant) */
.m1-sport-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--noir); margin-bottom: 16px; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.35); }
.m1-sport-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m1-sport-desc { font-size: 15px; line-height: 1.65; color: var(--noir); }
.m1-sport-desc p { margin-bottom: 12px; }
.m1-sport-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.m1-sport-gallery figure { margin: 0; }
.m1-sport-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }
.m1-sport-gallery figcaption { font-size: 11px; color: var(--gris); margin-top: 4px; line-height: 1.4; }

.m1-sport-sante { margin: 16px 24px; padding: 22px; background: var(--ivoire); border: 1px solid var(--gris-clair); border-left: 4px solid var(--succes); border-radius: 14px; }
.m1-sport-sante h3 { font-family: var(--police-titre); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.m1-sport-sante-txt { font-size: 14.5px; line-height: 1.65; color: var(--gris); }
.m1-sport-sante-txt p { margin-bottom: 10px; }

/* Version enfant de la fiche */
.m1-kid .m1-chap { color: var(--bleu); }
.m1-kid-photo { margin: 0 0 16px; }
.m1-kid-photo img { width: 100%; border-radius: 12px; display: block; }

/* Intro d'un parcours (texte de présentation) */
.m1-parcours-intro { margin: 0 24px 8px; padding: 16px 18px; background: var(--ivoire); border: 1px solid var(--gris-clair); border-radius: 12px; font-size: 14.5px; line-height: 1.6; color: var(--gris); }

/* ============================================================================
   RELATED — bouton « localiser sur le plan » + marqueur lié sur la mini-carte
   ============================================================================ */
.m1-list-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-decoration: none; color: var(--noir); }
.m1-list-locate {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--gris-clair); background: #fff; color: var(--or);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; transition: all 0.2s;
}
.m1-list-locate:hover { background: var(--or); color: #fff; border-color: var(--or); }
.m1-list-locate.m1-located { background: var(--noir); color: var(--or); border-color: var(--noir); }
.m1-list-locate:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
/* Marqueur des fiches proches : noir (la plaque courante reste dorée) */
.m1-leaflet-pin .m1-marker-rel { background: var(--noir); width: 32px; height: 32px; }
.m1-leaflet-pin .m1-marker-rel i { font-size: 17px; }
/* La carte « poursuivre la visite » est un bouton d'itinéraire (plus un lien vers la fiche) :
   on efface l'habillage natif du bouton pour garder le rendu de carte */
button.m1-list-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; }
button.m1-list-link:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; border-radius: 8px; }
.m1-list-route { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--or-sombre); }
.m1-list-route i { font-size: 11px; margin-left: 2px; }

/* Mini-carte plus haute : elle porte désormais l'itinéraire vers les plaques voisines.
   Plafonnée à 60vh pour rester lisible téléphone couché. */
.m1-mini-map { height: min(300px, 60vh); }
@media (min-width: 768px) { .m1-mini-map { height: min(400px, 60vh); } }

/* ============================================================================
   HERO JEU / ENQUÊTE — compact, photo de thème optionnelle, repli fond noir
   (même esprit que le hero compact de la page carte).
   ============================================================================ */
.m1-hero-game .m1-hero-content { position: relative; z-index: 2; }
.m1-hero-game .m1-hero-content h1 { font-size: 34px; }
.m1-hero-game.m1-hero-game-photo { background-size: cover; background-position: center; }
.m1-hero-game.m1-hero-game-photo::after {
  display: block; content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--noir) 50%, transparent), color-mix(in srgb, var(--noir) 80%, transparent));
}

/* ============================================================================
   JEU — règle du jeu + intro (chasse au trésor)
   ============================================================================ */
/* Ancre de défilement post-soumission : on évite que le header fixe recouvre
   la zone (la page ne « repart » plus tout en haut après validation). */
.m1-scroll-anchor { position: relative; top: -84px; display: block; height: 0; visibility: hidden; }

/* ============================================================================
   MON COMPTE (page compte.php)
   ============================================================================ */
.m1-compte { padding-bottom: 8px; }
.m1-compte-sec { margin: 0 24px 20px; }
.m1-compte-card { margin: -28px 24px 20px; position: relative; z-index: 3; background: #fff; border: 1px solid var(--gris-clair); border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.25); }
.m1-compte-avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--noir); color: var(--or); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.m1-compte-id { flex: 1; min-width: 0; }
.m1-compte-id strong { display: block; font-family: var(--police-titre); font-size: 18px; font-weight: 700; line-height: 1.15; }
.m1-compte-id small { font-size: 12px; color: var(--gris); word-break: break-word; }
.m1-compte-pts { flex-shrink: 0; text-align: center; }
.m1-compte-pts .m1-cp-val { display: block; font-family: var(--police-titre); font-size: 24px; font-weight: 700; color: var(--or); line-height: 1; }
.m1-compte-pts .m1-cp-lbl { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); }
.m1-compte-guest .m1-compte-avatar { background: var(--beige); color: var(--gris); }
.m1-compte-results { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.m1-cr-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 10px; font-size: 13.5px; }
.m1-cr-row > i { color: var(--or); flex-shrink: 0; }
.m1-cr-where { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m1-cr-val { flex-shrink: 0; font-size: 12.5px; color: var(--gris); }
.m1-cr-val.m1-cr-win { color: #2e7d32; font-weight: 600; }
.m1-cr-val.m1-cr-lose { color: #9f4422; font-weight: 600; }
.m1-compte-empty { font-size: 13.5px; color: var(--gris); line-height: 1.6; margin-top: 8px; }
.m1-compte-villes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m1-ville-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 20px; font-size: 13px; font-weight: 600; }
.m1-ville-chip i { color: var(--or); font-size: 12px; }

/* ============================================================================
   CLASSEMENT JOUEURS (page jeu)
   ============================================================================ */
.m1-leaderboard { margin: 0 24px 16px; }
.m1-lb-list { list-style: none; margin: 12px 0 0; padding: 0; }
.m1-lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 10px; margin-bottom: 8px; }
.m1-lb-row .m1-lb-rank { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--beige); color: var(--gris); font-family: var(--police-titre); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.m1-lb-row:nth-child(1) .m1-lb-rank { background: var(--or); color: var(--noir); }
.m1-lb-row:nth-child(2) .m1-lb-rank,
.m1-lb-row:nth-child(3) .m1-lb-rank { background: var(--or-clair); color: var(--noir); }
.m1-lb-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m1-lb-pts { flex-shrink: 0; font-family: var(--police-titre); font-weight: 700; color: var(--or); font-size: 14px; }
.m1-lb-me { border-color: var(--or); background: color-mix(in srgb, var(--or) 8%, transparent); }

/* Pastille « déjà vu » sur une étape de parcours */
.m1-etape-vu { color: var(--or); font-weight: 600; }
.m1-etape-vu i { font-size: 12px; }

/* Distance live depuis la position de l'utilisateur (carte + parcours) */
.m1-geo-dist { color: var(--gris); display: inline-flex; align-items: center; gap: 3px; }
.m1-geo-dist i { color: var(--or); font-size: 11px; }
.m1-geo-dist:not(.m1-geo-dist-on) { opacity: 0.5; } /* tant que la position n'est pas connue */
.m1-geo-dist.m1-geo-dist-on { color: var(--or); font-weight: 600; }

/* Légende sous les filtres de parcours (page carte) */
.m1-filters-legend { margin: -2px 24px 14px; font-size: 12.5px; line-height: 1.5; color: var(--gris); display: flex; gap: 6px; align-items: flex-start; }
.m1-filters-legend i { color: var(--or); margin-top: 2px; flex-shrink: 0; }

.m1-jeu-rules { margin: 0 24px 16px; }
.m1-jeu-intro { font-size: 14.5px; line-height: 1.6; color: var(--gris); margin: 6px 0 12px; }
.m1-jeu-regle { border: 1px solid var(--gris-clair); border-radius: 12px; background: var(--ivoire); overflow: hidden; }
.m1-jeu-regle > summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--noir);
  display: flex; align-items: center; justify-content: space-between;
}
.m1-jeu-regle > summary::-webkit-details-marker { display: none; }
.m1-jeu-regle > summary::after { content: '\002B'; color: var(--or); font-size: 18px; line-height: 1; }
.m1-jeu-regle[open] > summary::after { content: '\2212'; }
.m1-jeu-regle-txt { padding: 0 18px 16px; font-size: 14px; line-height: 1.6; color: var(--gris); }

/* ===========================================================================
   MODALE « carnet de visite » (compte visiteur — point 2)
   Réutilise .m1-field / .m1-cta-btn / .m1-check. Overlay plein écran, carte
   centrée sur la colonne de lecture. Réduit en feuille basse sur mobile.
   =========================================================================== */
.m1-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.m1-modal[hidden] { display: none; }
.m1-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,16,10,0.55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.25s ease;
}
.m1-modal.m1-open .m1-modal-backdrop { opacity: 1; }
.m1-modal-box {
  position: relative; z-index: 1;
  width: 100%; max-width: calc(var(--m1-col) - 36px);
  background: var(--beige);
  border-radius: 18px;
  padding: 30px 26px 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  transform: translateY(16px) scale(0.98); opacity: 0;
  transition: transform 0.28s cubic-bezier(.2,.8,.25,1), opacity 0.28s ease;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.m1-modal.m1-open .m1-modal-box { transform: translateY(0) scale(1); opacity: 1; }
.m1-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,0.05); color: var(--gris);
  font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, color 0.18s;
}
.m1-modal-close:hover { background: rgba(0,0,0,0.1); color: var(--noir); }
.m1-modal-head { text-align: center; margin-bottom: 20px; }
.m1-modal-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--or); color: var(--noir); font-size: 24px; margin-bottom: 14px;
}
.m1-modal-head h2 { font-family: var(--police-titre); font-size: 24px; font-weight: 700; line-height: 1.15; margin-bottom: 8px; }
.m1-modal-head p { font-size: 14.5px; line-height: 1.55; color: var(--gris); }
.m1-modal-errors { background: color-mix(in srgb, var(--erreur) 7%, transparent); border: 1px solid var(--erreur); border-radius: 10px; padding: 12px 16px 12px 18px; margin-bottom: 16px; }
.m1-modal-errors ul { margin: 0; padding-left: 18px; }
.m1-modal-errors li { color: var(--erreur); font-size: 14px; line-height: 1.5; }
.m1-modal-form { display: flex; flex-direction: column; gap: 16px; }
.m1-field-hint { font-size: 12px; line-height: 1.4; color: var(--gris); text-transform: none; letter-spacing: 0; font-weight: 400; }
.m1-modal-submit { justify-content: center; width: 100%; padding: 15px; font-size: 12.5px; }
.m1-modal-later {
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--gris);
  text-decoration: underline; padding: 4px; align-self: center;
}
.m1-modal-later:hover { color: var(--noir); }
.m1-modal-logout {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  align-self: center; font-size: 13px; color: var(--erreur);
  text-decoration: none; padding: 6px 4px;
}
.m1-modal-logout:hover { text-decoration: underline; }
.m1-modal-form input[readonly] { background: var(--gris-clair); color: var(--gris); cursor: not-allowed; }
.m1-modal-legal { font-size: 11.5px; line-height: 1.5; color: var(--gris); text-align: center; margin-top: 2px; }

@media (max-width: 470px) {
  .m1-modal { padding: 0; align-items: flex-end; }
  .m1-modal-box {
    max-width: 100%; border-radius: 20px 20px 0 0;
    transform: translateY(100%); padding-bottom: 30px;
    max-height: 92vh;
  }
  .m1-modal.m1-open .m1-modal-box { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .m1-modal-backdrop, .m1-modal-box { transition: none; }
}

/* === Vidéo carousel (chantier D) === */
.m1-carousel-video { flex: 0 0 320px; }
/* La vidéo (16/9) est moins haute que les photos (4/5) : la diapositive prend
   la hauteur de la rangée, fond noir, vidéo centrée — sinon elle flottait en
   haut d'un grand vide et la flèche « précédent » se posait dans ce vide. */
.m1-carousel-track { align-items: stretch; }
.m1-carousel-item.m1-carousel-video { display: flex; align-items: center; background: #000; border-radius: 4px; overflow: hidden; }
.m1-carousel-video .m1-video-ratio { border-radius: 0; }
.m1-video-ratio { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: #000; }
.m1-video-ratio iframe,
.m1-video-ratio .m1-video-local { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }

/* === Commentaires (chantier E) === */
.m1-comments {
  max-width: var(--m1-col);
  margin: 32px auto 0;
  padding: 24px 16px 8px;
  border-top: 1px solid var(--gris-clair);
}
.m1-comments-title {
  font-family: var(--police-titre);
  font-size: 22px;
  color: var(--noir);
  margin: 0 0 16px;
}
/* Titre commentaires façon « Pour poursuivre la visite » (kicker + titre or + sous-titre) */
.m1-comments .m1-chap { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--or); margin-bottom: 10px; font-weight: 600; }
.m1-comments-h3 { font-family: var(--police-titre); font-size: 26px; font-weight: 700; color: var(--or); letter-spacing: -0.01em; margin: 0 0 10px; line-height: 1.15; }
.m1-comments-h3 em { color: var(--or-sombre); font-style: italic; font-weight: 400; }
.m1-comments-sub { color: var(--gris); font-size: 15px; line-height: 1.55; margin: 0 0 20px; max-width: 560px; }
.m1-comments-empty { color: var(--gris); font-size: 14px; margin: 0 0 16px; }
.m1-comments-list { list-style: none; margin: 0 0 24px; padding: 0; }
.m1-comments-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-clair);
}
.m1-comments-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 4px;
}
.m1-comments-author { font-weight: 600; color: var(--noir); }
.m1-comments-date { font-size: 12px; color: var(--gris); white-space: nowrap; }
.m1-comments-text { margin: 0; color: var(--texte); font-size: 15px; line-height: 1.55; word-break: break-word; }

.m1-comments-msg { font-size: 14px; border-radius: 6px; padding: 10px 14px; margin: 0 0 16px; }
.m1-comments-msg--ok { background: #e7f3ec; color: var(--succes); border: 1px solid var(--succes); }
.m1-comments-msg--err { background: #fdecea; color: var(--erreur); border: 1px solid var(--erreur); list-style: none; }
.m1-comments-msg--err li { margin: 2px 0; }

.m1-comments-form { margin-top: 8px; }
.m1-comments-form-title {
  font-family: var(--police-titre);
  font-size: 17px; color: var(--noir); margin: 0 0 12px;
}
.m1-comments-label { display: block; font-size: 13px; color: var(--gris); margin: 10px 0 4px; }
.m1-comments-input,
.m1-comments-textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--gris-clair); border-radius: 6px;
  font-family: inherit; font-size: 15px; color: var(--noir); background: #fff;
}
.m1-comments-textarea { resize: vertical; min-height: 90px; }
.m1-comments-input:focus,
.m1-comments-textarea:focus { outline: 2px solid var(--or); outline-offset: 1px; border-color: var(--or); }
.m1-comments-btn {
  margin-top: 14px; padding: 11px 22px; border: 0; border-radius: 6px;
  background: var(--noir); color: var(--beige);
  font-family: inherit; font-size: 15px; cursor: pointer;
}
.m1-comments-btn:hover { background: var(--or-sombre); color: #fff; }
.m1-comments-note { font-size: 12px; color: var(--gris); margin: 10px 0 0; }
.m1-comments-btn--full,
.m1-comments-form .m1-comments-btn { display: block; width: 100%; text-align: center; }
/* Même trait que la bordure sous chaque commentaire (.m1-comments-item) */
.m1-comments-sep { height: 0; border: 0; border-top: 1px solid var(--gris-clair); background: transparent; opacity: 1; margin: 30px 0 0; }

/* ===========================================================================
   PARTENAIRES / FINANCEURS — bandeau bas de fiche
   « Avec le soutien de » + rangée de logos. Style éditorial sobre : logos en
   niveaux de gris atténués qui reprennent leur couleur au survol/focus.
   =========================================================================== */
.m1-partners {
  margin: 38px 0 6px;
  padding: 26px 22px 4px;
  border-top: 1px solid var(--gris-clair);
  text-align: center;
}
.m1-partners-kicker {
  margin: 0 0 18px;
  font-family: var(--police-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gris);
}
.m1-partners-text {
  max-width: 340px;
  margin: 0 auto 22px;
  font-family: var(--police-lecture);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gris);
}
.m1-partners-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 28px;
}
.m1-partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.m1-partner img {
  display: block;
  max-height: 52px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
a.m1-partner:hover img,
a.m1-partner:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}
a.m1-partner:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .m1-partner img { max-height: 60px; max-width: 160px; }
}
/* Logo de soutien unique : occupe toute la largeur, en couleur (logo officiel
   d'un financeur type Interreg — pas de grisé/atténuation). */
.m1-partner:only-child {
  width: 100%;
}
.m1-partner:only-child img {
  max-height: 200px;
  max-width: 100%;
  filter: none;
  opacity: 1;
}

/* ===========================================================================
   POPUP PARTENAIRES — ouvert à la 1re ouverture de chaque plaque
   Réutilise le squelette .m1-modal (fond, boîte, bouton de fermeture). Ici les
   logos sont en COULEUR et plus grands que dans le bandeau de bas de fiche :
   c'est l'écran du financeur, pas une mention de pied de page.
   =========================================================================== */
.m1-partners-modal .m1-modal-head { margin-bottom: 22px; }
.m1-partners-modal .m1-modal-ico { background: var(--or-clair); }
.m1-pm-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 26px;
  margin-bottom: 26px;
}
.m1-pm-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.m1-pm-item img {
  display: block;
  max-height: 76px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}
a.m1-pm-item:hover img,
a.m1-pm-item:focus-visible img { transform: translateY(-2px); }
a.m1-pm-item:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Financeur unique : le logo prend toute la largeur de la boîte. */
.m1-pm-item:only-child { width: 100%; }
.m1-pm-item:only-child img { max-height: 190px; max-width: 100%; }

.m1-pm-fermer { justify-content: center; width: 100%; padding: 15px; font-size: 12.5px; }
.m1-pm-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gris);
  text-align: center;
}
.m1-pm-lien {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--noir);
  text-decoration: underline;
  cursor: pointer;
}
.m1-pm-lien:hover { color: var(--or-sombre); }

@media (max-width: 470px) {
  .m1-pm-item img { max-height: 62px; max-width: 140px; }
  .m1-pm-item:only-child img { max-height: 150px; }
}

/* ===========================================================================
   PARTENAIRES — emplacements « en-tête » et « pied » (migration 011)
   Mise en page imposée par les programmes européens (Interreg, FEDER) : logo
   du projet en haut à gauche, slogan du programme en bas à droite. Toujours
   en couleur : un logo officiel ne se grise pas.
   =========================================================================== */
.m1-pm-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 18px;
  margin: 0 44px 20px 0;           /* 44px : place du bouton de fermeture */
}
.m1-pm-entete-item,
.m1-pm-pied-item {
  display: inline-flex;
  text-decoration: none;
}
.m1-pm-entete-item img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}
.m1-pm-officiel .m1-modal-head { text-align: left; }
.m1-pm-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-clair);
}
.m1-pm-pied-item img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}
a.m1-pm-entete-item:focus-visible,
a.m1-pm-pied-item:focus-visible,
a.m1-partner-entete:focus-visible,
a.m1-partner-pied:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Bandeau de bas de fiche : même logique, en plus discret. */
.m1-partners-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px 18px;
  margin-bottom: 22px;
}
.m1-partner-entete,
.m1-partner-pied {
  display: inline-flex;
  text-decoration: none;
}
.m1-partner-entete img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}
.m1-partners-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
  margin-top: 22px;
}
.m1-partner-pied img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* ===========================================================================
   JEU — comptes, sur place, classements (migration 012)
   =========================================================================== */
/* Lecteurs d'écran seulement */
.m1-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Pot de miel anti-robot : hors écran, jamais display:none (certains robots le repèrent) */
.m1-pot-de-miel { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.m1-jeu-bienvenue { margin: 16px 24px 0; padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--succes) 8%, transparent); border: 1px solid var(--succes); color: var(--succes); font-size: 14px; line-height: 1.5; }

/* Sur place */
.m1-geo-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gris); }
.m1-geo-note i { color: var(--or-sombre); margin-right: 4px; }
.m1-geo-erreur { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--erreur) 7%, transparent); border: 1px solid var(--erreur); color: var(--erreur); font-size: 14px; line-height: 1.5; }
.m1-geo-etat { margin: 4px 0 0; font-size: 13.5px; color: var(--noir); font-weight: 600; }
.m1-answer:disabled, .m1-cta-btn:disabled { opacity: 0.6; cursor: progress; }

/* Classement de la ville (page jeu) */
.m1-lb-moi { margin: 6px 0 0; font-size: 13.5px; color: var(--gris); }
.m1-lb-vide { margin: 12px 0; font-size: 14px; color: var(--gris); }
.m1-leaderboard .m1-lb-tout { margin-top: 12px; color: var(--noir); border-color: var(--or-sombre); }  /* texte noir : l’or sur beige ne tient pas le contraste AA */

/* Page classements */
.m1-classement { margin: 0 0 16px; }
.m1-classement-intro { margin: 20px 24px 6px; font-size: 14.5px; line-height: 1.6; color: var(--gris); }
.m1-classement .m1-filters { border-bottom: 0; padding-top: 8px; padding-bottom: 8px; background: transparent; }
.m1-classement .m1-lb-list { margin: 10px 24px 0; }
.m1-classement .m1-lb-vide,
.m1-classement-note { margin: 10px 24px; font-size: 13px; line-height: 1.5; color: var(--gris); }
.m1-classement-moi { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 24px 4px; padding: 14px 16px; border-radius: 12px; background: var(--noir); color: #fff; }
.m1-classement-moi span { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.m1-classement-moi strong { font-family: var(--police-titre); font-size: 26px; color: var(--or); }
.m1-classement-moi small { font-size: 14px; color: rgba(255,255,255,0.7); }

/* Compte : suppression et déconnexion */
.m1-compte-danger { padding: 18px; border: 1px solid var(--erreur); border-radius: 12px; background: color-mix(in srgb, var(--erreur) 4%, transparent); }
.m1-compte-danger p { font-size: 14px; line-height: 1.55; color: var(--gris); margin: 8px 0 12px; }
.m1-compte-suppr { display: flex; flex-direction: column; gap: 12px; }
.m1-cta-danger { background: var(--erreur); color: #fff; border: 0; cursor: pointer; font-family: inherit; justify-content: center; }
.m1-cta-danger:hover { background: #a53125; color: #fff; }
.m1-modal-logout-form { display: flex; justify-content: center; margin-top: 10px; }
.m1-modal-logout-form .m1-modal-logout { background: none; border: 0; cursor: pointer; font-family: inherit; }

/* ===========================================================================
   CARTE — les étiquettes et les bulles tracent un itinéraire (plus de lien
   vers la fiche : le contenu d'une plaque se découvre en la flashant)
   =========================================================================== */
button.m1-list-card { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.m1-list-card:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
button.m1-mappop-link { background: none; border: 0; font-family: inherit; cursor: pointer; }
.m1-list-card .m1-list-route { color: var(--noir); }
.m1-bigroute-info { margin: 10px 24px 0; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--gris-clair); font-size: 14px; line-height: 1.5; color: var(--noir); }

/* ===========================================================================
   SCANNER DE QRPLAQUE, PLAQUES CACHÉES, PLAQUES SCANNÉES
   =========================================================================== */
.m1-scanner { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--noir) 92%, transparent); }
.m1-scanner[hidden] { display: none; }   /* sans elle, display:flex l'emporte sur hidden et la fenêtre fermée recouvre toute la page */
.m1-list-card[hidden], .m1-bigroute-info[hidden] { display: none; }   /* « Masquer les plaques déjà scannées » */
.m1-scanner-box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; color: #fff; text-align: center; }
.m1-scanner-box h2 { font-family: var(--police-titre); font-size: 22px; margin: 0; color: #fff; }
.m1-scanner-cadre { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 16px; overflow: hidden; background: #000; }
.m1-scanner-cadre video { width: 100%; height: 100%; object-fit: cover; display: block; }
.m1-scanner-viseur { position: absolute; inset: 18%; border: 3px solid var(--or); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,0.35); }
.m1-scanner-etat { min-height: 1.5em; margin: 0; font-size: 15px; line-height: 1.5; color: #fff; }
.m1-scanner .m1-cta-ghost { justify-content: center; color: #fff; border-color: rgba(255,255,255,0.6); }

.m1-carte-outils { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 0; }
.m1-carte-outils .m1-chip { cursor: pointer; font-family: inherit; }
.m1-carte-outils .m1-chip:disabled { opacity: 0.5; cursor: default; }
.m1-list-vue { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--succes); }
.m1-list-cachee { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--noir); }
.m1-list-cachee i, .m1-mappop-cachee i { color: var(--or-sombre); }
.m1-mappop-cachee { padding: 0 12px 8px; font-size: 12.5px; line-height: 1.45; color: var(--noir); }
.m1-marker-cachee { background: var(--beige) !important; color: var(--noir) !important; border: 2px dashed var(--or-sombre) !important; }
.m1-quiz-scan .m1-action-btns { margin-top: 14px; }

/* Boutons côte à côte ou empilés : même largeur et même espacement, partout */
.m1-action-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.m1-action-btns .m1-cta-btn { width: 100%; min-width: 0; justify-content: center; margin: 0; border: 0; cursor: pointer; font-family: inherit; }
.m1-action-btns .m1-cta-ghost { border: 1.5px solid var(--or); }
.m1-action-card > .m1-cta-btn + .m1-cta-btn { margin-top: 10px; }
.m1-fiche-scanner { margin: 24px 24px 8px; }

/* Les cartes Leaflet montent jusqu'à z-index 1000 (calques 400, contrôles 800-1000) :
   sans contexte d'empilement propre, elles passaient au-dessus du menu du bas et
   du scanner. isolation: isolate les enferme sous tout ce qui est fixé à l'écran. */
.m1-mini-map, .m1-big-map, .m1-map { position: relative; z-index: 0; isolation: isolate; }

/* Photo / avatar du joueur */
.m1-compte-avatar-photo { padding: 0; overflow: hidden; }
.m1-compte-avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m1-lb-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 1px solid var(--gris-clair); }

/* Plan du lieu de retrait du trésor (écran du gagnant) */
.m1-tresor-plan { margin: 24px 24px 8px; }
.m1-tresor-plan h3 { font-family: var(--police-titre); font-size: 24px; margin: 6px 0 14px; }
.m1-tresor-plan h3 em { color: var(--or); font-style: italic; font-weight: 400; }
.m1-tresor-carte { border-radius: 14px; border: 1px solid var(--gris-clair); height: 320px; margin-bottom: 10px; }
.m1-tresor-plan .m1-bigroute-info { margin: 0 0 12px; }

/* Fenêtre « Mes paramètres » : photo et bouton de déconnexion */
.m1-modal-photo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gris-clair); }
.m1-modal-photo-titre { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris); font-weight: 600; margin-bottom: 10px; }
.m1-modal-photo .m1-photo { padding: 0; border: 0; background: transparent; }
.m1-modal-logout-form { display: block; margin-top: 18px; }
.m1-btn-deconnexion { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border: 1.5px solid var(--erreur); border-radius: 8px; background: #fff; color: var(--erreur); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.m1-btn-deconnexion:hover { background: var(--erreur); color: #fff; }
.m1-btn-deconnexion:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }

/* Page « Mon compte » : intitulés et textes des sections (hors article) */
.m1-compte-sec .m1-chap { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--or-sombre); margin-bottom: 10px; font-weight: 600; }
.m1-compte-sec > p { font-size: 14px; line-height: 1.55; color: var(--gris); margin: 0 0 14px; }
.m1-compte-sec .m1-cta-ghost { color: var(--noir); border: 1.5px solid var(--or); background: #fff; }
.m1-compte-sec .m1-cta-ghost i { color: var(--or-sombre); }
.m1-compte-sec .m1-cta-ghost:hover { background: color-mix(in srgb, var(--or) 14%, transparent); }
.m1-compte-sec h3 { font-family: var(--police-titre); font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.m1-compte-sec h3 em { color: var(--or-sombre); font-style: italic; font-weight: 400; }
.m1-compte-sec .m1-list-cards { padding: 4px 0 0; }

/* Bloc « Ma photo » (page compte et fenêtre paramètres) — _php/photo-joueur.php */
.m1-photo-message { margin: 0 0 12px; padding: 11px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.m1-photo-ok { background: color-mix(in srgb, var(--succes) 8%, transparent); border: 1px solid var(--succes); color: var(--succes); }
.m1-photo-erreur { background: color-mix(in srgb, var(--erreur) 7%, transparent); border: 1px solid var(--erreur); color: var(--erreur); }
.m1-photo { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px 16px; align-items: center; padding: 18px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 14px; }
.m1-photo-apercu { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--noir); color: var(--or); display: flex; align-items: center; justify-content: center; font-size: 36px; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--or); }
.m1-photo-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m1-photo-choisie .m1-photo-apercu { box-shadow: 0 0 0 2px var(--succes); }
/* Le corps s'efface dans la grille : aperçu + texte sur la 1re ligne, formulaire et retrait en pleine largeur dessous */
.m1-photo-corps { display: contents; }
.m1-photo-txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gris); }
.m1-photo-form { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.m1-photo-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m1-photo-choisir { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px dashed var(--or); border-radius: 10px; background: var(--ivoire); color: var(--noir); font-size: 14px; font-weight: 600; cursor: pointer; min-width: 0; transition: background 0.2s, border-color 0.2s; }
.m1-photo-choisir i { color: var(--or-sombre); font-size: 18px; flex-shrink: 0; }
.m1-photo-choisir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.m1-photo-choisir:hover { background: #fff; border-style: solid; }
.m1-photo-input:focus-visible + .m1-photo-choisir { outline: 2px solid var(--noir); outline-offset: 3px; }
.m1-photo-choisie .m1-photo-choisir { border-style: solid; border-color: var(--succes); background: color-mix(in srgb, var(--succes) 6%, transparent); }
.m1-photo-form .m1-field-hint { margin-top: -2px; }
.m1-photo-envoyer { width: 100%; justify-content: center; border: 0; cursor: pointer; font-family: inherit; margin-top: 4px; }
.m1-photo-retirer { grid-column: 1 / -1; margin: 0; }
.m1-btn-secondaire { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1.5px solid var(--gris-clair); border-radius: 8px; background: #fff; color: var(--gris); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.m1-btn-secondaire:hover { border-color: var(--erreur); color: var(--erreur); }
.m1-btn-secondaire:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }

/* Itinéraire sans position (localisation refusée ou indisponible) : message
   sous la mini-carte, à la place de l'ancienne sortie vers OpenStreetMap. */
.m1-route-alerte { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--or); background: var(--ivoire); font-size: 13.5px; line-height: 1.5; color: var(--texte); }
.m1-route-alerte[hidden] { display: none; }
.m1-route-alerte i { color: var(--or-sombre); margin-top: 2px; }

/* Carte du parcours (page Parcours) : la grande carte de la page Carte,
   ouverte filtrée sur le parcours suivi. */
.m1-parcours-carte { margin: 20px 24px 8px; }
.m1-parcours-carte .m1-big-map { height: 320px; border: 1px solid var(--gris-clair); border-radius: 12px; }
.m1-parcours-carte .m1-bigroute-info { margin: 8px 0 0; }

/* Jeu sans compte : information RGPD + invitation à s'inscrire (jeu.php) */
.m1-jeu-anonyme { margin: 16px 24px 0; padding: 14px 16px; border: 1px solid var(--gris-clair); border-left: 3px solid var(--or); border-radius: 10px; background: #fff; }
.m1-jeu-anonyme p { font-size: 14px; line-height: 1.55; color: var(--texte); margin: 0 0 12px; }
.m1-jeu-anonyme .m1-cta-btn { width: 100%; justify-content: center; }

/* Mon compte — consentements « informations de la ville », retirables */
.m1-optin-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.m1-optin-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gris-clair); }
.m1-optin-liste li small { display: block; color: var(--gris); font-size: 12px; }
.m1-optin-liste form { display: inline-block; flex-shrink: 0; }
.m1-optin-liste .m1-cta-btn { padding: 8px 14px; }