/* =============================================================
   Ordre des Gardiens du Patrimoine Guadeloupéen
   Parcours « Chevalier de Saint-Georges » — feuille commune
   Utilisée par : index du parcours + toutes les étapes QR code.

   Conçue pour une lecture en extérieur, sur téléphone, au soleil :
   fort contraste, grandes cibles tactiles, peu d'octets.
   ============================================================= */

:root{
  color-scheme: light;

  --ink:        #16150f;
  --ink-soft:   #403b33;
  --ink-mute:   #6d6459;
  --rule:       #ded6c8;
  --rule-soft:  #ebe5d9;

  --paper:      #fbf8f2;
  --paper-alt:  #f2ecdf;
  --card:       #ffffff;

  --green:      #1c3b30;
  --green-mid:  #2c5a49;
  --ochre:      #9d5a22;
  --ochre-soft: #f4e3d0;
  --plum:       #6b2334;
  --ok:         #1f6b46;
  --ko:         #9c2b2b;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --shadow:    0 1px 2px rgba(22,21,15,.05), 0 10px 30px -14px rgba(22,21,15,.25);
  --shadow-lg: 0 2px 6px rgba(22,21,15,.07), 0 22px 48px -20px rgba(22,21,15,.35);

  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --tap: 48px;                 /* cible tactile minimale */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--green-mid); text-underline-offset:.18em; }
a:hover{ color:var(--ochre); }
:focus-visible{ outline:3px solid var(--ochre); outline-offset:3px; border-radius:4px; }
button{ font:inherit; color:inherit; }

.wrap{ width:min(100% - 2rem, 44rem); margin-inline:auto; }
.wrap--lg{ width:min(100% - 2rem, 62rem); }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:.75rem 1.1rem; }
.skip:focus{ left:0; }

.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;
}

/* ---------------- Barre supérieure ---------------- */
.topbar{
  background:var(--green); color:#e9e0cf;
  padding-top:env(safe-area-inset-top, 0px);
}
.topbar-in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:56px; padding:.5rem 0;
}
.tb-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; min-width:0; }
.tb-mark{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  background:#e9e0cf; color:var(--green);
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:.92rem;
}
.tb-txt{ display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.tb-name{ font-size:.82rem; font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-sub{ font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; opacity:.72; }
.tb-link{
  font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#e9e0cf; text-decoration:none; white-space:nowrap;
  border:1px solid rgba(233,224,207,.35); border-radius:999px; padding:.42rem .8rem;
}
.tb-link:hover{ background:rgba(233,224,207,.14); color:#fff; }

/* ---------------- En-tête d'étape ---------------- */
.station-head{ padding:2rem 0 .5rem; }

.step-meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.step-num{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ochre); background:var(--ochre-soft);
  padding:.34rem .75rem; border-radius:999px; white-space:nowrap;
}
.step-kind{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }

.dots{ display:flex; gap:5px; list-style:none; margin:0 0 1.4rem; padding:0; flex-wrap:wrap; }
.dots li{ width:22px; height:5px; border-radius:3px; background:var(--rule); }
.dots li.done{ background:var(--green-mid); }
.dots li.now{ background:var(--ochre); }

.station-head h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.1rem, 8vw, 3.3rem); line-height:1.05; letter-spacing:-.012em;
  margin:0 0 .8rem; text-wrap:balance;
}
.station-head .sub{
  font-family:var(--serif); font-style:italic; font-size:1.14rem;
  color:var(--ink-mute); margin:0; max-width:38ch;
}

/* ---------------- Lecteur audio ---------------- */
.player{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:1.5rem 1.35rem 1.35rem; margin:2rem 0;
  box-shadow:var(--shadow-lg);
}
.player[data-state="error"]{ opacity:.75; }

.p-main{ display:flex; align-items:center; gap:1.15rem; }

.pp{
  width:76px; height:76px; flex:0 0 auto;
  border-radius:50%; border:0; cursor:pointer;
  background:var(--green); color:#f4ecdd;
  display:grid; place-items:center;
  box-shadow:0 6px 18px -6px rgba(28,59,48,.6);
  transition:transform .12s ease, background .12s ease;
}
.pp:hover{ background:var(--green-mid); }
.pp:active{ transform:scale(.94); }
.pp:disabled{ background:var(--rule); color:var(--ink-mute); box-shadow:none; cursor:not-allowed; }
.pp svg{ width:30px; height:30px; fill:currentColor; }
.pp .i-pause{ display:none; }
.player[data-state="playing"] .pp .i-play{ display:none; }
.player[data-state="playing"] .pp .i-pause{ display:block; }

.p-body{ flex:1 1 auto; min-width:0; }

.seek{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; cursor:pointer; margin:0;
}
.seek::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:var(--rule); }
.seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%; background:var(--ochre);
  border:3px solid var(--card); margin-top:-7px; box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.seek::-moz-range-track{ height:6px; border-radius:3px; background:var(--rule); }
.seek::-moz-range-progress{ height:6px; border-radius:3px; background:var(--green-mid); }
.seek::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--ochre);
  border:3px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.seek:disabled{ cursor:not-allowed; opacity:.5; }

.times{
  display:flex; justify-content:space-between;
  font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--ink-mute); margin-top:.15rem;
}

.p-tools{
  display:flex; gap:.5rem; margin-top:1.15rem;
  border-top:1px solid var(--rule-soft); padding-top:1rem;
}
.p-tools button{
  flex:1 1 0; min-height:var(--tap);
  background:var(--paper-alt); border:1px solid var(--rule); border-radius:var(--r-sm);
  font-size:.82rem; font-weight:600; cursor:pointer;
  transition:background .12s ease;
}
.p-tools button:hover{ background:var(--ochre-soft); border-color:#e0c3a0; }
.p-tools button:disabled{ opacity:.45; cursor:not-allowed; }

.p-msg{
  margin:1.1rem 0 0; padding:.8rem 1rem;
  background:var(--ochre-soft); border-radius:var(--r-sm);
  font-size:.85rem; color:#7d4718; line-height:1.5;
}

/* ---------------- Transcription ---------------- */
.transcript{ border:1px solid var(--rule); border-radius:var(--r); background:var(--card); margin:1.5rem 0; }
.transcript summary{
  cursor:pointer; list-style:none; padding:1rem 1.2rem;
  font-size:.88rem; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--tap);
}
.transcript summary::-webkit-details-marker{ display:none; }
.transcript summary::after{ content:"+"; font-size:1.4rem; color:var(--ochre); line-height:1; }
.transcript[open] summary::after{ content:"–"; }
.transcript .t-in{ padding:0 1.2rem 1.2rem; font-size:.92rem; color:var(--ink-soft); }
.transcript .t-in p{ margin:0 0 .8rem; }
.transcript .t-in p:last-child{ margin-bottom:0; }

/* ---------------- Navigation entre étapes ---------------- */
.station-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem;
  margin:2.5rem 0 1rem;
}
.sn{
  display:flex; flex-direction:column; gap:.2rem; justify-content:center;
  min-height:76px; padding:.85rem 1rem;
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
  text-decoration:none; color:var(--ink); transition:border-color .12s ease, background .12s ease;
}
.sn:hover{ border-color:var(--ochre); background:var(--ochre-soft); color:var(--ink); }
.sn[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
.sn-dir{ font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); }
.sn-title{ font-size:.87rem; font-weight:600; line-height:1.3; }
.sn--next{ text-align:right; }

.all-steps{
  display:block; text-align:center; min-height:var(--tap);
  padding:.9rem 1rem; border-radius:var(--r-sm);
  background:var(--paper-alt); border:1px solid var(--rule);
  font-size:.85rem; font-weight:600; text-decoration:none; color:var(--ink-soft);
}
.all-steps:hover{ background:var(--ochre-soft); color:var(--ink); }

/* ---------------- Encadrés ---------------- */
.note{
  border-left:3px solid var(--ochre); background:var(--paper-alt);
  padding:1rem 1.2rem; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:1.6rem 0;
  font-size:.9rem; color:var(--ink-soft);
}
.note p{ margin:0 0 .7rem; }
.note p:last-child{ margin-bottom:0; }
.note strong{ color:var(--ink); }

/* ---------------- Pied de page ---------------- */
.foot{
  background:var(--ink); color:#a49b8e;
  padding:2.5rem 0 calc(2rem + var(--safe-b)); margin-top:3rem;
  font-size:.82rem;
}
.foot a{ color:#d8cfc0; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot ul{ list-style:none; margin:0 0 1.4rem; padding:0; display:flex; flex-wrap:wrap; gap:1.2rem; }
.foot p{ margin:0; line-height:1.6; }
.foot-brand{ font-family:var(--serif); font-size:1.15rem; color:#efe7da; margin:0 0 .8rem; }

/* ---------------- Index du parcours ---------------- */
.hero-p{ padding:2.5rem 0 1rem; }
.hero-p .kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ochre); margin:0 0 1rem;
}
.hero-p .kicker::before{ content:""; width:26px; height:2px; background:var(--ochre); }
.hero-p h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.4rem,8vw,4rem); line-height:1.03; margin:0 0 .8rem; letter-spacing:-.015em;
}
.hero-p .lede{ font-size:1.08rem; color:var(--ink-soft); max-width:42ch; margin:0; }

.steps{ list-style:none; margin:2.5rem 0 0; padding:0; counter-reset:st; }
.steps li{ counter-increment:st; }
.step-card{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.15rem 1.2rem; margin-bottom:.6rem;
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
  text-decoration:none; color:var(--ink);
  transition:border-color .12s ease, transform .12s ease;
}
.step-card:hover{ border-color:var(--ochre); transform:translateX(2px); color:var(--ink); }
.step-card[aria-disabled="true"]{ opacity:.55; pointer-events:none; background:var(--paper-alt); }
.step-card .n{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--green); color:#f0e7d7;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.step-card[aria-disabled="true"] .n{ background:var(--rule); color:var(--ink-mute); }
.step-card .b{ min-width:0; }
.step-card .t{ font-family:var(--serif); font-size:1.28rem; font-weight:600; line-height:1.22; margin:0 0 .25rem; }
.step-card .d{ font-size:.8rem; color:var(--ink-mute); margin:0; }
.tag{
  display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.16rem .5rem; border-radius:3px; margin-right:.4rem; vertical-align:.1em;
}
.tag--audio{ background:#dfe9e2; color:var(--green); }
.tag--quiz{ background:var(--ochre-soft); color:#8a4f1d; }
.tag--soon{ background:#eee9df; color:var(--ink-mute); }

/* ---------------- Quiz ---------------- */
.quiz{ margin:2rem 0; }
.q-bar{ height:6px; border-radius:3px; background:var(--rule); overflow:hidden; margin-bottom:1.6rem; }
.q-bar i{ display:block; height:100%; background:var(--ochre); width:0; transition:width .3s ease; }
.q-count{ font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 .8rem; }
.q-text{ font-family:var(--serif); font-size:clamp(1.5rem,5vw,2rem); line-height:1.2; margin:0 0 1.6rem; }

.opts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.opt{
  width:100%; text-align:left; min-height:var(--tap);
  padding:.95rem 1.1rem; cursor:pointer;
  background:var(--card); border:1.5px solid var(--rule); border-radius:var(--r);
  font-size:.95rem; line-height:1.4;
  transition:border-color .12s ease, background .12s ease;
}
.opt:hover:not(:disabled){ border-color:var(--ochre); background:var(--ochre-soft); }
.opt:disabled{ cursor:default; }
.opt.good{ border-color:var(--ok); background:#e6f2eb; color:#123f28; font-weight:600; }
.opt.bad{ border-color:var(--ko); background:#f8e9e9; color:#6d1f1f; }

.q-fb{ margin:1.3rem 0 0; padding:1rem 1.15rem; border-radius:var(--r-sm); font-size:.88rem; line-height:1.55; }
.q-fb.good{ background:#e6f2eb; color:#123f28; }
.q-fb.bad{ background:#f8e9e9; color:#6d1f1f; }
.q-fb strong{ display:block; margin-bottom:.25rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tap); padding:.8rem 1.4rem; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:600; text-decoration:none; cursor:pointer;
  background:var(--green); color:#f5efe3; border:1.5px solid var(--green);
}
.btn:hover{ background:var(--green-mid); border-color:var(--green-mid); color:#fff; }
.btn--ghost{ background:transparent; color:var(--green); }
.btn--ghost:hover{ background:var(--green); color:#f5efe3; }
.btn--block{ width:100%; }

.score{ text-align:center; padding:1.5rem 0; }
.score .n{
  font-family:var(--serif); font-size:clamp(3.5rem,16vw,5.5rem); line-height:1;
  color:var(--green); font-variant-numeric:tabular-nums;
}
.score .n small{ font-size:.35em; color:var(--ink-mute); }
.score h2{ font-family:var(--serif); font-size:1.9rem; margin:.6rem 0 .5rem; }
.score p{ color:var(--ink-soft); max-width:34ch; margin:0 auto 1.8rem; }
.score .acts{ display:flex; flex-direction:column; gap:.6rem; max-width:22rem; margin:0 auto; }

/* ---------------- Pages de contenu de la section ---------------- */
.prose{ max-width:40rem; }
.prose > section{ padding:2.2rem 0; border-top:1px solid var(--rule-soft); }
.prose > section:first-child{ border-top:0; padding-top:.5rem; }
.prose h2{
  font-family:var(--serif); font-weight:700; letter-spacing:-.008em;
  font-size:clamp(1.7rem,4.6vw,2.35rem); line-height:1.14; margin:0 0 1rem; text-wrap:balance;
}
.prose h3{ font-size:1.02rem; font-weight:700; margin:1.9rem 0 .5rem; }
.prose p{ margin:0 0 1.05rem; }
.prose ul, .prose ol{ padding-left:1.15rem; margin:0 0 1.2rem; }
.prose li{ margin-bottom:.55rem; }
.prose .lede{ font-size:1.12rem; line-height:1.6; color:var(--ink-soft); }
.prose .first::first-letter{
  font-family:var(--serif); font-weight:700; float:left;
  font-size:3.6rem; line-height:.82; padding:.28rem .5rem 0 0; color:var(--green);
}
.pull{
  font-family:var(--serif); font-size:clamp(1.35rem,4vw,1.75rem); line-height:1.28;
  color:var(--green); border-left:3px solid var(--ochre);
  padding:.2rem 0 .2rem 1.2rem; margin:2rem 0; font-style:italic;
}

/* Chronologie */
.tl{ list-style:none; margin:1.4rem 0 0; padding:0 0 0 1.6rem; border-left:2px solid var(--rule); }
.tl > li{ position:relative; padding-bottom:1.5rem; }
.tl > li::before{
  content:""; position:absolute; left:calc(-1.6rem - 6px); top:.5rem;
  width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid var(--ochre);
}
.tl > li.key::before{ background:var(--ochre); }
.tl .d{ font-family:var(--serif); font-size:1.24rem; font-weight:700; color:var(--green); line-height:1.2; font-variant-numeric:tabular-nums; }
.tl .b{ margin:.15rem 0 0; font-size:.94rem; color:var(--ink-soft); }

/* Fiche de repères */
.facts{ background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:1.2rem 1.35rem; margin:1.8rem 0; }
.facts dl{ margin:0; }
.facts div{ padding:.6rem 0; border-top:1px solid var(--rule-soft); }
.facts div:first-child{ border-top:0; padding-top:0; }
.facts dt{ font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:.12rem; }
.facts dd{ margin:0; font-size:.92rem; line-height:1.45; }

/* Grille de cartes */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.9rem; margin:1.5rem 0; }
.card{ background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:1rem 1.15rem; }
.card h4{ font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--green); margin:0 0 .3rem; }
.card p{ font-size:.86rem; color:var(--ink-soft); margin:0; line-height:1.5; }

/* Sources */
.srcs ol{ font-size:.87rem; color:var(--ink-soft); }
.srcs li{ margin-bottom:.7rem; }
.srcs cite{ font-style:normal; font-weight:600; color:var(--ink); }
.stag{ display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.1rem .42rem; border-radius:3px; margin-left:.35rem; vertical-align:.1em; }
.stag--off{ background:#dce7df; color:var(--green); }
.stag--sec{ background:var(--ochre-soft); color:#8a4f1d; }

@media print{ .topbar,.player,.station-nav,.foot,.all-steps{ display:none; } }