/* Espace public.
   Pensé pour un téléphone tenu d'une main, dans une église, avec peu de
   lumière. Corps de texte généreux, cibles tactiles confortables, contraste
   suffisant dans les deux thèmes (cahier des charges, section 10). */

:root {
    color-scheme: light dark;
    --fond: #fbfaf8;
    --fond-carte: #ffffff;
    --encre: #1c1a17;
    --encre-douce: #55504a;
    --trait: #d9d3ca;
    --accent: #6d4b2f;
    --accent-encre: #ffffff;
    --alerte-fond: #fdf1e7;
    --alerte-trait: #b4551f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond: #14130f;
        --fond-carte: #1e1c18;
        --encre: #f4f1ec;
        --encre-douce: #b9b2a7;
        --trait: #3a352f;
        --accent: #d8ae7c;
        --accent-encre: #1e1c18;
        --alerte-fond: #2e2018;
        --alerte-trait: #e0996a;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fond);
    color: var(--encre);
    /* rem partout : la taille de texte du navigateur reste maitresse. */
    font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.saut { position: absolute; left: -9999px; padding: .5rem 1rem; background: var(--accent); color: var(--accent-encre); }
.saut:focus { left: .5rem; top: .5rem; z-index: 10; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

a { color: var(--accent); }

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

.tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: .875rem 1.25rem;
    background: var(--fond-carte);
    border-bottom: 1px solid var(--trait);
}

.tete__titre { font-weight: 700; text-decoration: none; color: var(--encre); }
.tete__nav ul { display: flex; gap: .375rem; list-style: none; margin: 0; padding: 0; }

.tete__nav a {
    display: block;
    padding: .4375rem .875rem;
    text-decoration: none;
    color: var(--encre-douce);
    border: 1px solid var(--trait);
    border-radius: 2rem;
    font-size: .9375rem;
    white-space: nowrap;
}

.tete__nav a[aria-current] {
    color: var(--accent-encre);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

.page { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 .375rem; }
p { margin: 0 0 1rem; }

.bouton {
    display: inline-block;
    padding: .75rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--encre);
    background: var(--fond-carte);
    border: 1px solid var(--trait);
    border-radius: .375rem;
}

.bouton--fort { color: var(--accent-encre); background: var(--accent); border-color: var(--accent); }

button {
    padding: .75rem 1.5rem;
    font: inherit;
    font-weight: 600;
    color: var(--accent-encre);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: .375rem;
    cursor: pointer;
}

.aide { font-size: .9375rem; color: var(--encre-douce); }
.vide { padding: 1.5rem; text-align: center; color: var(--encre-douce); background: var(--fond-carte); border: 1px solid var(--trait); border-radius: .5rem; }
.compte { font-size: .9375rem; color: var(--encre-douce); }

/* --- Accueil --------------------------------------------------------------- */

.accroche__texte { font-size: 1.125rem; }
.accroche__actions { margin: 1.5rem 0 2.5rem; }

.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.colonnes article { padding: 1.125rem; background: var(--fond-carte); border: 1px solid var(--trait); border-radius: .5rem; }
.colonnes h2 { margin-top: 0; font-size: 1.0625rem; }
.colonnes p { margin: 0; font-size: .9375rem; }

.cdas { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }

/* --- Recherche et liste ---------------------------------------------------- */

.recherche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .875rem;
    align-items: end;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: var(--fond-carte);
    border: 1px solid var(--trait);
    border-radius: .5rem;
}

.champ { display: flex; flex-direction: column; gap: .3125rem; margin: 0; }
label { font-size: .875rem; color: var(--encre-douce); }

input[type="search"], select {
    padding: .625rem .75rem;
    font: inherit;
    color: var(--encre);
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: .25rem;
}

.recherche__actions { display: flex; align-items: center; gap: 1rem; margin: 0; }

.lieux { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }

.lieu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1rem;
    background: var(--fond-carte);
    border: 1px solid var(--trait);
    border-radius: .5rem;
}

.lieu a { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.lieu__nom { display: block; font-weight: 600; color: var(--accent); }
.lieu__meta, .lieu__dedicace { display: block; font-size: .875rem; color: var(--encre-douce); }

.pastille { font-size: .8125rem; padding: .1875rem .625rem; border: 1px solid var(--trait); border-radius: 1rem; color: var(--encre-douce); }

.pages { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* --- Fiche d'un lieu ------------------------------------------------------- */

.fil { font-size: .875rem; color: var(--encre-douce); margin-bottom: 1rem; }

.fiche-lieu__type { font-size: .9375rem; color: var(--encre-douce); margin-bottom: .25rem; }
.fiche-lieu__dedicace { font-size: 1.0625rem; color: var(--encre-douce); }

.parcours { margin: 2rem 0; }
.parcours__liste { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }

.parcours__item {
    padding: 1.125rem;
    background: var(--fond-carte);
    border: 1px solid var(--trait);
    border-radius: .5rem;
}

.parcours__item h3 { margin-top: 0; }
.parcours__meta, .parcours__poids { font-size: .875rem; color: var(--encre-douce); }

.pratique dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .375rem 1rem; margin: 0 0 1rem; }
.pratique dt { color: var(--encre-douce); font-size: .9375rem; }
.pratique dd { margin: 0; }

@media (max-width: 32rem) {
    .pratique dl { grid-template-columns: 1fr; gap: 0 0; }
    .pratique dt { margin-top: .625rem; }
}

.consigne {
    padding: .875rem 1rem;
    background: var(--alerte-fond);
    border-left: 4px solid var(--alerte-trait);
    border-radius: .25rem;
}

.sources { font-size: .9375rem; color: var(--encre-douce); }

/* --- Deroulement d'un parcours --------------------------------------------- */

.telechargement__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.telechargement__etat { font-size: .9375rem; color: var(--encre-douce); min-height: 1.5rem; }

.visite__rang { font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-douce); }
.visite__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.75rem 0 0; }
.visite__score { font-size: 1.25rem; font-weight: 600; color: var(--accent); }

/* Les bulles s'enchainent : chacune est une prise de parole du narrateur. */
.bulle {
    padding: .875rem 1.125rem;
    margin: 0 0 .625rem;
    background: var(--fond-carte);
    border: 1px solid var(--trait);
    border-radius: 1rem 1rem 1rem .25rem;
}

figure { margin: 1.25rem 0; }
figure img { width: 100%; height: auto; border-radius: .5rem; }
figcaption { font-size: .875rem; color: var(--encre-douce); margin-top: .375rem; }
.credit { display: block; font-size: .8125rem; opacity: .8; }

audio, video { width: 100%; margin: 1rem 0; }
.transcription { font-size: .9375rem; color: var(--encre-douce); margin-bottom: 1rem; }

blockquote {
    margin: 1.25rem 0;
    padding: .25rem 0 .25rem 1.125rem;
    border-left: 4px solid var(--accent);
}

blockquote .bulle { background: none; border: 0; padding: 0; border-radius: 0; font-style: italic; }
blockquote cite { display: block; font-size: .875rem; color: var(--encre-douce); font-style: normal; }

.priere { padding: 1.25rem; margin: 1.25rem 0; background: var(--fond-carte); border: 1px solid var(--accent); border-radius: .5rem; text-align: center; }
.priere .bulle { background: none; border: 0; padding: .25rem 0; border-radius: 0; }

.silence { padding: 2rem 1.25rem; margin: 1.25rem 0; text-align: center; border: 1px dashed var(--trait); border-radius: .5rem; }

.avant-apres, .galerie-visite { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.avant-apres figure, .galerie-visite figure { margin: 0; }

.hors-ligne-manquant {
    padding: .875rem 1rem;
    background: var(--alerte-fond);
    border-left: 4px solid var(--alerte-trait);
    border-radius: .25rem;
    font-size: .9375rem;
}

/* --- Mini-jeu -------------------------------------------------------------- */

.jeu { margin: 1.75rem 0; padding: 1.25rem; background: var(--fond-carte); border: 1px solid var(--trait); border-radius: .5rem; }
.jeu__question { margin-top: 0; }

.jeu__choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }

.jeu__choix button {
    width: 100%;
    text-align: left;
    color: var(--encre);
    background: var(--fond);
    border: 1px solid var(--trait);
    font-weight: 400;
}

.jeu__choix button:hover:not([disabled]) { border-color: var(--accent); }
.jeu__choix figure { margin: 0 0 .5rem; }
.jeu__zone img { cursor: crosshair; }

.jeu__retour { margin: 1rem 0 0; font-weight: 600; }
.juste { color: var(--accent); }
.faux { color: var(--alerte-trait); }

.indices { margin-top: .75rem; }
.indice { padding: .75rem 1rem; margin-bottom: .5rem; background: var(--alerte-fond); border-left: 4px solid var(--alerte-trait); border-radius: .25rem; font-size: .9375rem; }

.explication { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); }

button[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Carte et scan --------------------------------------------------------- */

.carte {
    height: 70vh;
    min-height: 20rem;
    margin-bottom: 1rem;
    background: var(--fond-carte);
    border: 1px solid var(--trait);
    border-radius: .5rem;
    overflow: hidden;
}

/* Sans Leaflet, le repli occupe la place et reste lisible. */
.carte .vide { border: 0; height: 100%; display: flex; align-items: center; justify-content: center; }

.scan { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.scan__cadre { margin: 1rem 0; border-radius: .5rem; overflow: hidden; background: #000; }
.scan__cadre video { display: block; width: 100%; height: auto; }

.erreur-code { color: var(--alerte-trait); font-weight: 600; min-height: 1.5rem; }

/* Le code se recopie a la main : chiffres et lettres bien distincts. */
#code {
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", monospace;
    font-size: 1.375rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

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

.pied {
    padding: 1.5rem 1.25rem 2rem;
    background: var(--fond-carte);
    border-top: 1px solid var(--trait);
    font-size: .875rem;
    color: var(--encre-douce);
}

.pied p { max-width: 46rem; margin: 0 auto .75rem; }
.pied__mention { font-size: .8125rem; }