/* Le Val d'Anniviers en 2056
   Palette claire et contrastee, pensee pour un ecran de telephone en plein
   soleil de montagne. Cibles tactiles larges, texte suffisamment gros pour
   etre lu debout, avec des gants, sans s'arreter de marcher. */

:root {
  --bg: #f4f1ea;
  --card: #ffffff;
  --ink: #16212c;
  --ink-soft: #4d5b69;
  --ink-faint: #7c8a97;
  --line: #d9d3c7;
  --line-strong: #b9b1a1;
  --accent: #1d3b57;
  --accent-soft: #e6edf4;
  --ok: #1f7a4d;
  --ok-soft: #e3f4ea;
  --warn: #96611a;
  --warn-soft: #fbf0dd;
  --bad: #a32b2b;
  --bad-soft: #fbe7e7;
  --p-montagne: #4a7fb5;
  --p-eau: #2f9e9e;
  --p-vie-alpine: #6f9e4a;
  --p-patrimoine: #b5804a;
  --p-memoire: #9b6fb0;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(22, 33, 44, .08), 0 4px 14px rgba(22, 33, 44, .06);
  --tab-h: 62px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

body { min-height: 100vh; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.04rem; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* --------------------------------------------------------------- squelette */

.boot {
  min-height: 80vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; color: var(--ink-soft); text-align: center; padding: 2rem;
}
.boot-icon { font-size: 3rem; }
.boot-warn { color: var(--bad); font-weight: 600; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--accent); color: #fff;
  padding: calc(.5rem + env(safe-area-inset-top)) .9rem .5rem;
  display: flex; align-items: center; gap: .6rem;
}
.topbar-title { font-weight: 700; font-size: 1rem; flex: 1; min-width: 0; }
.topbar-title small { display: block; font-weight: 400; font-size: .74rem; opacity: .82; }
.topbar-back {
  background: rgba(255,255,255,.16); border: 0; color: #fff;
  width: 38px; height: 38px; border-radius: 10px; font-size: 1.2rem; line-height: 1;
  display: grid; place-items: center; flex: 0 0 auto;
}
.net-dot {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; background: rgba(255,255,255,.16); padding: .22rem .5rem; border-radius: 999px;
  white-space: nowrap;
}
.net-dot i { width: 8px; height: 8px; border-radius: 50%; background: #7fd3a2; display: block; }
.net-dot.off i { background: #f0a3a3; }
.net-dot.warn i { background: #f3cf86; }

main { flex: 1; padding: .9rem .9rem calc(var(--tab-h) + 1.4rem + env(safe-area-inset-bottom)); max-width: 760px; width: 100%; margin: 0 auto; }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; height: var(--tab-h); text-decoration: none; color: var(--ink-faint);
  font-size: .6rem; font-weight: 600; position: relative;
  padding: 0 1px; text-align: center; line-height: 1.1;
}
.tabbar a .ic { font-size: 1.2rem; line-height: 1; }
.tabbar a.on { color: var(--accent); }
.tabbar a.on::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  background: var(--accent); border-radius: 0 0 3px 3px;
}
.tabbar .badge {
  position: absolute; top: 6px; right: calc(50% - 18px);
  background: var(--bad); color: #fff; font-size: .6rem; min-width: 16px; height: 16px;
  border-radius: 999px; display: grid; place-items: center; padding: 0 4px;
}

/* ------------------------------------------------------------------ cartes */

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem; margin-bottom: .8rem; box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; }
.card-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.card-head h2, .card-head h3 { margin: 0; flex: 1; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: .82rem; }
.tiny { font-size: .74rem; }
.center { text-align: center; }
.stack > * + * { margin-top: .7rem; }
.row { display: flex; align-items: center; gap: .5rem; }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.sep { height: 1px; background: var(--line); margin: .8rem 0; border: 0; }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .6rem 1rem; border-radius: 12px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-weight: 650; text-decoration: none; text-align: center;
}
.btn:disabled { opacity: .5; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--card); color: var(--accent); }
.btn.quiet { background: var(--card); color: var(--ink-soft); border-color: var(--line-strong); }
.btn.danger { background: var(--bad); border-color: var(--bad); }
.btn.danger.ghost { background: var(--card); color: var(--bad); border-color: var(--bad); }
.btn.sm { min-height: 38px; padding: .3rem .7rem; font-size: .84rem; border-radius: 9px; }

/* ----------------------------------------------------------------- champs */

label.field { display: block; margin-bottom: .7rem; }
label.field > span { display: block; font-weight: 600; font-size: .84rem; margin-bottom: .28rem; }
input[type=text], input[type=search], input[type=tel], textarea, select {
  width: 100%; min-height: 48px; padding: .6rem .7rem;
  border: 1px solid var(--line-strong); border-radius: 11px; background: #fff;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid #9dbbd6; outline-offset: 1px;
}
input[type=file] { display: none; }

/* ------------------------------------------------------------------ puces */

.chip {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .2rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 650;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
  white-space: nowrap;
}
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.plain { background: #eee9de; color: var(--ink-soft); }

.filters { display: flex; gap: .4rem; overflow-x: auto; padding: .1rem 0 .5rem; -webkit-overflow-scrolling: touch; }
.filters::-webkit-scrollbar { display: none; }
.fbtn {
  flex: 0 0 auto; border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink-soft); border-radius: 999px; padding: .42rem .8rem;
  font-size: .84rem; font-weight: 600; min-height: 40px;
}
.fbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ----------------------------------------------------------------- jauges */

.gauge + .gauge { margin-top: .9rem; }
.gauge-top { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .3rem; }
.gauge-top .nm { font-weight: 650; flex: 1; min-width: 0; }
.gauge-top .vl { font-variant-numeric: tabular-nums; font-weight: 700; }
.gauge-bar { height: 16px; background: #e8e3d8; border-radius: 999px; overflow: hidden; position: relative; }
.gauge-fill { height: 100%; border-radius: 999px; transition: width .5s ease; min-width: 2px; }
.gauge-floor {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-faint); opacity: .65;
}
.gauge-note { font-size: .72rem; color: var(--ink-faint); margin-top: .18rem; }

.total-bar { height: 22px; background: #e8e3d8; border-radius: 999px; overflow: hidden; position: relative; }
.total-fill { height: 100%; background: linear-gradient(90deg, #2f6f9e, #3f9e7a); transition: width .5s ease; }
.total-target { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); opacity: .5; }

/* ------------------------------------------------------------------ defis */

.challenge-list { display: grid; gap: .6rem; }
.ch {
  display: block; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--line-strong);
  border-radius: var(--radius); padding: .7rem .8rem; box-shadow: var(--shadow);
}
.ch h3 { margin: 0 0 .2rem; font-size: 1rem; }
.ch .meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ch .pts { font-weight: 750; font-variant-numeric: tabular-nums; }
.ch.done { background: #fbfdfb; }
.ch .loc { font-size: .76rem; color: var(--ink-faint); margin-top: .3rem; }

.pill-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* ------------------------------------------------------------------- quiz */

.q { border: 1px solid var(--line); border-radius: 12px; padding: .75rem; margin-bottom: .7rem; background: #fff; }
.q.good { border-color: #9ed3b6; background: var(--ok-soft); }
.q-num { font-size: .72rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.q-text { font-weight: 650; margin: .2rem 0 .6rem; }
.opts { display: grid; gap: .4rem; }
.opt {
  display: flex; align-items: center; gap: .55rem; text-align: left; width: 100%;
  min-height: 48px; padding: .5rem .7rem; border-radius: 11px;
  border: 1px solid var(--line-strong); background: #fff; font-size: .94rem;
}
.opt .mk {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}
.opt.picked-good { border-color: var(--ok); background: var(--ok-soft); color: #14563a; font-weight: 650; }
.opt.picked-good .mk { border-color: var(--ok); background: var(--ok); color: #fff; }
.opt.picked-bad { border-color: var(--bad); background: var(--bad-soft); color: #7d1f1f; }
.opt.picked-bad .mk { border-color: var(--bad); background: var(--bad); color: #fff; }
.opt:disabled { opacity: 1; }
.q-why {
  margin-top: .55rem; padding: .5rem .6rem; border-radius: 9px;
  background: rgba(31,122,77,.09); font-size: .86rem; color: #1b5c3c;
}
.q-retry { margin-top: .5rem; font-size: .84rem; color: var(--bad); font-weight: 600; }

/* ----------------------------------------------------------------- groupe */

/* Avec le portrait et la case a cocher, une pastille a besoin de place : sur
   un telephone on passe donc a une personne par ligne, nom entier visible. */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .4rem; }
.people > * { min-width: 0; }
.person .grow { min-width: 0; overflow-wrap: break-word; }
.person {
  display: flex; align-items: center; gap: .5rem; text-align: left;
  min-height: 46px; padding: .4rem .6rem; border-radius: 11px;
  border: 1px solid var(--line-strong); background: #fff; font-size: .9rem;
}
.person.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.person.me { border-style: dashed; opacity: .85; }
.person .bx {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: .7rem; font-weight: 800;
}
.person.on .bx { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ------------------------------------------------------------------ photo */

.photo-zone {
  border: 2px dashed var(--line-strong); border-radius: 12px; padding: 1rem;
  text-align: center; color: var(--ink-soft); background: #fcfbf8;
}
.photo-zone .big { font-size: 2rem; display: block; margin-bottom: .2rem; }
.photo-prev { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.photo-prev img { display: block; width: 100%; height: auto; }
.photo-prev .rm {
  position: absolute; top: .5rem; right: .5rem; background: rgba(0,0,0,.68); color: #fff;
  border: 0; border-radius: 9px; padding: .35rem .6rem; font-size: .8rem; font-weight: 600;
}

/* ----------------------------------------------------------------- album */

.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .35rem; }
.album button { padding: 0; border: 0; background: #e8e3d8; border-radius: 9px; overflow: hidden; aspect-ratio: 1; }
.album img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: #0b1117;
  display: flex; flex-direction: column; color: #fff;
  padding: calc(.6rem + env(safe-area-inset-top)) .6rem calc(.6rem + env(safe-area-inset-bottom));
}
.lightbox .close { align-self: flex-end; background: rgba(255,255,255,.18); border: 0; color: #fff; border-radius: 10px; min-height: 42px; padding: .4rem .9rem; font-weight: 650; }
.lightbox .frame { flex: 1; display: grid; place-items: center; min-height: 0; margin: .5rem 0; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox .info { font-size: .86rem; }
.lightbox .info strong { display: block; font-size: 1rem; }

/* ------------------------------------------------------------- classement */

.rank { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.rank-row {
  display: flex; align-items: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: .5rem .7rem;
}
.rank-row.me { border-color: var(--accent); background: var(--accent-soft); }
.rank-pos { width: 28px; text-align: right; font-weight: 750; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rank-row.me .rank-pos { color: var(--accent); }
.rank-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le detail passe sous le nom : sur un telephone, une seule ligne ne peut pas
   porter le nom entier, le nombre de defis et le score sans tout tronquer. */
.rank-name small { display: block; font-weight: 500; font-size: .74rem; color: var(--ink-faint); }
.rank-row.me .rank-name small { color: var(--accent); }
.rank-pts { font-weight: 750; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- synergies */

.syn-card { border-left: 5px solid var(--p-memoire); }
.syn-card.locked { opacity: .72; }
.syn-steps { display: grid; gap: .3rem; margin-top: .45rem; }
.syn-step { display: flex; align-items: center; gap: .45rem; font-size: .86rem; }
.syn-step .mk { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: .66rem; font-weight: 800; flex: 0 0 auto; }
.syn-step.done .mk { border-color: var(--ok); background: var(--ok); color: #fff; }

.modal-back {
  position: fixed; inset: 0; z-index: 100; background: rgba(12,18,24,.72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.modal {
  background: var(--card); border-radius: 18px; padding: 1.1rem; width: 100%; max-width: 520px;
  max-height: 86vh; overflow-y: auto; box-shadow: 0 -8px 40px rgba(0,0,0,.3);
}
.modal-kicker { font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--p-memoire); }
.modal h2 { margin: .15rem 0 .6rem; }
.modal .story { font-size: .98rem; }
.modal .learn { margin-top: .7rem; padding: .7rem; border-radius: 11px; background: #f3eef7; font-size: .9rem; }
.modal .bonus { margin-top: .7rem; display: flex; gap: .4rem; flex-wrap: wrap; }

@media (min-width: 560px) { .modal-back { align-items: center; } }

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + .8rem + env(safe-area-inset-bottom)); z-index: 80;
  background: var(--ink); color: #fff; padding: .6rem .9rem; border-radius: 11px;
  font-size: .88rem; font-weight: 600; max-width: min(92vw, 460px); box-shadow: 0 6px 22px rgba(0,0,0,.25);
}
.toast.success { background: #13603f; }
.toast.error { background: #8a2424; }

/* ------------------------------------------------------------------ divers */

.banner { border-radius: 12px; padding: .65rem .8rem; font-size: .88rem; margin-bottom: .8rem; border: 1px solid; }
.banner.warn { background: var(--warn-soft); border-color: #e3c98f; color: #6c4511; }
.banner.bad { background: var(--bad-soft); border-color: #e5abab; color: #7d1f1f; }
.banner.ok { background: var(--ok-soft); border-color: #a6d8bd; color: #14563a; }
.banner.info { background: var(--accent-soft); border-color: #b4cbdd; color: #17364f; }

.empty { text-align: center; padding: 2rem 1rem; color: var(--ink-faint); }
.empty .big { font-size: 2.4rem; display: block; margin-bottom: .3rem; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; animation: spin .7s linear infinite; display: inline-block;
}
.spinner.dark { border-color: rgba(22,33,44,.2); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; font-size: .88rem; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; font-weight: 600; }

.note-block {
  background: #f7f5f0; border-left: 3px solid var(--line-strong);
  padding: .5rem .65rem; border-radius: 0 9px 9px 0; font-size: .88rem; white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------- illustration evolutive de la vallee */

/* L'illustration sort du rembourrage de la page pour occuper toute la largeur
   de l'ecran. Un cadrage un peu plus haut que l'image d'origine lui donne la
   presence qu'elle merite, sans perdre le raccard ni les sommets. */
.vallee {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #16212c;
  border: 0;
  cursor: zoom-in;
  display: block;
  padding: 0;
  text-align: left;
}
@media (min-width: 620px) {
  .vallee { aspect-ratio: 1376 / 768; border-radius: var(--radius); }
}
.vallee .loupe {
  position: absolute; top: .6rem; right: .6rem;
  background: rgba(12, 18, 24, .55); color: #fff;
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 1rem;
}
.vallee img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La couche du dessus apparait en fondu par dessus l'ancienne, qui reste
   visible dessous le temps de la transition. Aucun clignotement. */
.vallee img.entrante {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.vallee img.entrante.visible { opacity: 1; }

.vallee-legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.8rem .9rem .7rem;
  background: linear-gradient(to top, rgba(12, 18, 24, .85), rgba(12, 18, 24, 0));
  color: #fff;
  display: flex; align-items: flex-end; gap: .6rem;
  text-align: left;
}
.vallee-legende .txt { flex: 1; min-width: 0; font-weight: 650; font-size: .92rem; line-height: 1.25; }
.vallee-legende .pct {
  font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; white-space: nowrap;
}
.vallee-legende .pct small { font-size: .62rem; font-weight: 600; opacity: .8; display: block; text-align: right; }
.vallee-legende .aide { font-size: .7rem; font-weight: 500; opacity: .78; display: block; margin-top: .1rem; }

@media (prefers-reduced-motion: reduce) {
  .vallee img.entrante { transition: none; }
}

/* ------------------------------------------- diaporama de la page d'identification */

/* Les six etats de la vallee defilent en grand derriere le formulaire. La
   couche est fixe et couvre tout l'ecran, y compris sous la barre du haut.
   Un voile clair garde les textes lisibles en plein soleil. */
/* Surtout pas de z-index ici : cela creerait un contexte d'empilement, et la
   photo en plein ecran se retrouverait coincee sous la barre du haut. */
.ident { position: relative; }
.accueil > .btn { position: relative; z-index: 1; }
.ident > .card, .ident > form.card, .ident > .filters, .ident > .banner, .ident > .btn,
.ident > .diapo-espace {
  position: relative; z-index: 1;
  box-shadow: 0 2px 10px rgba(22, 33, 44, .14), 0 10px 30px rgba(22, 33, 44, .10);
}
.ident > .card, .ident > form.card { background: rgba(255, 255, 255, .95); backdrop-filter: blur(4px); }
.ident > .diapo-espace { box-shadow: none; }

/* Sur un telephone, les cartes occupent toute la largeur : sans cette bande
   reservee, l'image de fond ne se verrait plus du tout. On lui laisse donc tout
   le premier ecran, moins de quoi laisser depasser le haut de la carte, ce qui
   montre qu'il y a du contenu dessous. Il vient glisser par dessus l'image au
   defilement. */
.diapo-espace {
  display: block; width: 100%; border: 0; background: transparent; padding: 0;
  --depasse: 168px;
  height: calc(100vh - var(--depasse));
  min-height: 220px; max-height: 820px;
  cursor: zoom-in; text-align: left; color: #fff;
}
/* svh vaut la hauteur visible quand la barre d'adresse est affichee, donc la
   bande ne deborde jamais sous le bandeau du navigateur sur iPhone. */
@supports (height: 1svh) {
  .diapo-espace { height: calc(100svh - var(--depasse)); }
}
.diapo-espace .loupe {
  position: absolute; top: .1rem; right: .1rem;
  background: rgba(12, 18, 24, .5); color: #fff;
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1rem;
}
.diapo-espace .txt {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem .3rem .5rem;
  display: flex; flex-direction: column;
  background: linear-gradient(to top, rgba(12, 18, 24, .68), rgba(12, 18, 24, 0));
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 650; font-size: .94rem; line-height: 1.25;
}
.diapo-espace .ligne { display: flex; align-items: flex-end; gap: .5rem; }
.diapo-espace .aide { font-size: .72rem; font-weight: 500; opacity: .85; white-space: nowrap; }
.diapo-espace .defiler {
  text-align: center; font-size: .78rem; font-weight: 600; opacity: .9; margin-top: .45rem;
}
@media (min-width: 620px) {
  .diapo-espace { --depasse: 250px; max-height: 680px; }
}

.diapo { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.diapo-zone {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0; background: #16212c; cursor: zoom-in;
  display: block;
}
.diapo-zone img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.diapo-zone img.entrante { opacity: 0; transition: opacity 1.1s ease-in-out; }
.diapo-zone img.entrante.visible { opacity: 1; }
/* Le voile ne doit pas intercepter les appuis : l'image reste cliquable. */
.diapo-voile {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 33, 44, .12), rgba(244, 241, 234, .10) 45%, rgba(244, 241, 234, .38));
}
@media (prefers-reduced-motion: reduce) {
  .diapo-zone img.entrante { transition: none; }
}

/* ------------------------------------------------------- portrait de profil */

.avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; background: var(--accent-soft); border: 1px solid var(--line);
  display: grid; place-items: center; padding: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.vide { color: var(--accent); font-weight: 750; font-size: .74rem; letter-spacing: .02em; }
.avatar.sm { width: 28px; height: 28px; }
.avatar.sm.vide { font-size: .64rem; }
.avatar.lg { width: 64px; height: 64px; }
.avatar.lg.vide { font-size: 1.2rem; }
.avatar.xl { width: 92px; height: 92px; }
.avatar.xl.vide { font-size: 1.7rem; }
button.avatar { cursor: zoom-in; }

.portrait-champ { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; }
.portrait-cible {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  border: 2px dashed var(--line-strong); background: #fcfbf8;
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  position: relative; color: var(--ink-soft); text-align: center;
}
.portrait-cible.rempli { border-style: solid; border-color: var(--ok); }
.portrait-cible img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-cible input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.portrait-vide { display: grid; gap: .1rem; line-height: 1.1; }
.portrait-vide .ic { font-size: 1.5rem; }

/* ------------------------------------------------- galerie photo d'une fiche */

/* La bande déborde volontairement du rembourrage de la carte, pour que chaque
   photo occupe toute la largeur disponible. Défilement par à coups, une photo
   à la fois. */
.photos-piste {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Bord a bord dans la carte : la photo gagne tout le rembourrage. */
  margin: 0 -.9rem;
  padding: 0 0 .4rem;
  scrollbar-width: none;
}
.photos-piste::-webkit-scrollbar { display: none; }

.photos-vue {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  padding: 0;
  border: 0;
  background: #e8e3d8;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
}
.photos-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photos-vue .legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem .7rem .55rem;
  background: linear-gradient(to top, rgba(12, 18, 24, .8), rgba(12, 18, 24, 0));
  color: #fff;
  font-size: .84rem;
  font-weight: 650;
  text-align: left;
  line-height: 1.25;
}
.photos-vue .loupe {
  position: absolute; top: .5rem; right: .5rem;
  background: rgba(12, 18, 24, .55); color: #fff;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: .95rem;
}

.photos-barre {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .1rem;
}
.photos-piste + .photos-barre { padding: 0 .1rem; }
.photos-points { display: flex; gap: .3rem; flex: 1; }
.photos-points i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-strong); display: block; transition: background .2s;
}
.photos-points i.on { background: var(--accent); }

@media (min-width: 620px) {
  .photos-vue { flex-basis: calc(50% - .25rem); }
}

/* Plein écran : la photo prend toute la largeur, sans rembourrage perdu. */
.lightbox { padding-left: 0; padding-right: 0; }
.lightbox .close { align-self: flex-end; margin-right: .6rem; }
/* Positionnement absolu plutot qu'une grille : dans une grille dimensionnee
   par son contenu, le max-height en pourcentage ne se resout pas et la photo
   debordait de l'ecran en mode paysage. */
.lightbox .frame {
  flex: 1 1 auto; min-height: 0; margin: .5rem 0;
  display: block; position: relative;
}
.lightbox .frame img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 0;
  transition: transform .25s ease;
  transform-origin: center center;
}
/* Un appui agrandit la photo pour en examiner le détail, un second la remet. */
/* Agrandissement : on elargit reellement l'image plutot que de la mettre a
   l'echelle. Une mise a l'echelle ne change pas la taille de la boite, et le
   deplacement dans l'image serait alors impossible. La marge automatique
   centre l'image tant qu'elle tient, et laisse defiler des qu'elle deborde. */
.lightbox .frame.zoom { overflow: auto; display: flex; }
.lightbox .frame.zoom img {
  position: static;
  margin: auto;
  transform: none;
  max-width: none; max-height: none;
  width: 220%; height: auto;
  cursor: zoom-out;
}
.lightbox .frame img { cursor: zoom-in; }
.lightbox .info { flex: 0 0 auto; padding: .3rem .7rem 0; }

/* Écran couché : la photo occupe presque tout, c'est le meilleur affichage
   pour ces images de paysage. */
@media (orientation: landscape) {
  .lightbox .close { position: absolute; top: .6rem; right: .6rem; z-index: 2; }
  .lightbox .frame { margin: 0; }
  .lightbox .info { background: linear-gradient(to top, rgba(12,18,24,.85), transparent);
                    position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .5rem; }
}