/* event.mykollector.com — habillage public « nocturne »
   Encre de nuit, brume lavande, lumière de lanterne. Police : Bricolage Grotesque (hébergée ici). */
body.nuit {
  --encre: #10142b; --encre-2: #181d3d; --crepuscule: #262c5a; --brume: #c9c4e8; --brume-2: #8f8bb8;
  --lanterne: #f4a53a; --lanterne-2: #ffd08a; --braise: #e8613c; --lait: #f6f2ea;
  --trait: rgba(201,196,232,.16); --verre: rgba(24,29,61,.72);
  --fond: var(--encre); --carte: var(--encre-2); --texte: var(--lait); --doux: var(--brume-2); --ligne: var(--trait);
  --accent: var(--lanterne); --accent-fonce: #e08d1c; --accent-clair: rgba(244,165,58,.14);
  --ok: #7fd3a3; --ok-clair: rgba(127,211,163,.14); --alerte: #ff8f7a; --alerte-clair: rgba(255,143,122,.14); --info-clair: rgba(201,196,232,.12);
  --titre: "Bricolage", system-ui, sans-serif;
  font-family: "Bricolage", system-ui, sans-serif; font-size: 17px; line-height: 1.55;
  background: var(--encre); color: var(--texte); color-scheme: dark;
}
.nuit a { color: var(--lanterne-2); }
.nuit h1, .nuit h2, .nuit h3 { font-family: var(--titre); font-weight: 700; letter-spacing: -.02em; font-variation-settings: "opsz" 96; }
.nuit .ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.17em; }
.nuit :focus-visible { outline: 2px solid var(--lanterne); outline-offset: 3px; border-radius: 6px; }
.nuit .aide { color: var(--brume-2); }

/* En-tête : transparent sur l'image, opaque au défilement */
.nuit .entete { position: sticky; top: 0; z-index: 40; background: transparent; transition: background .3s, backdrop-filter .3s; }
.nuit .entete.plein { background: rgba(16,20,43,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nuit .entete .in { max-width: 1240px; padding: 16px 24px; }
.nuit .entete a.marque { font-family: var(--titre); font-weight: 700; font-size: 1.15rem; color: var(--lait); display: inline-flex; align-items: center; gap: 10px; }
.nuit .entete a.marque svg { width: 26px; height: 26px; color: var(--lanterne); }
.nuit .entete .droite a { color: var(--brume); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

/* Boutons */
.nuit .btn { background: var(--lanterne); color: #1c1305; font-weight: 700; border-radius: 999px; padding: 13px 24px; box-shadow: 0 0 0 0 rgba(244,165,58,.5); }
.nuit .btn:hover { background: var(--lanterne-2); }
.nuit .btn.second { background: transparent; color: var(--lait); border: 1.5px solid var(--trait); }
.nuit .btn.second:hover { border-color: var(--brume); background: rgba(201,196,232,.06); }
.nuit .btn:disabled { background: rgba(201,196,232,.14); color: var(--brume-2); }

/* ═══ Accueil : la scène d'ouverture ═══ */
.scene { position: relative; min-height: min(92vh, 860px); margin-top: -72px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.scene .photo { position: absolute; inset: 0; z-index: -2; }
.scene .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 70% 38%, rgba(244,165,58,.10), transparent 70%),
              linear-gradient(180deg, rgba(16,20,43,.55) 0%, rgba(16,20,43,.25) 40%, rgba(16,20,43,.92) 88%, var(--encre) 100%); }
.scene .in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 150px 24px 56px; }
.scene h1 { font-size: clamp(2.6rem, 6.6vw, 5.8rem); line-height: .96; letter-spacing: -.035em; max-width: 15ch; margin: 0 0 22px; }
.scene h1 .ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.scene h1 .ligne > span { display: inline-block; }
.scene .chapo { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--brume); max-width: 46ch; margin: 0 0 30px; }
.scene .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.onde { display: block; width: 100%; height: 110px; margin-top: 46px; overflow: visible; }
.onde path { fill: none; stroke-linecap: round; }
.onde .o1 { stroke: var(--lanterne); stroke-width: 2.5; }
.onde .o2 { stroke: var(--brume); stroke-width: 1.5; opacity: .45; }

/* ═══ Agenda : rangées éditoriales ═══ */
.agenda { max-width: 1240px; margin: 0 auto; padding: 40px 24px 30px; }
.agenda > h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0 0 8px; }
.agenda > p { color: var(--brume); max-width: 56ch; margin: 0 0 34px; }
.rangee-ev { color: var(--lait) !important; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: 34px 0; border-top: 1px solid var(--trait); color: inherit; text-decoration: none; }
.rangee-ev:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rangee-ev:nth-child(even) .visuel { order: 2; }
.rangee-ev .visuel { position: relative; aspect-ratio: 16/10; border-radius: 22px; overflow: hidden; background: radial-gradient(80% 90% at 30% 20%, #3a3f7a, var(--encre-2)); }
.rangee-ev .visuel img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.9); }
.rangee-ev:hover .visuel img, .rangee-ev:focus-visible .visuel img { transform: scale(1.07); filter: saturate(1.05); }
.rangee-ev .visuel .etat { position: absolute; left: 16px; top: 16px; }
.rangee-ev h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1; margin: 0 0 10px; }
.rangee-ev .sous { color: var(--brume); font-size: 1.1rem; margin: 0 0 18px; }
.infos-ev { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; color: var(--brume); }
.infos-ev li { display: flex; gap: 10px; align-items: center; }
.infos-ev .ic { color: var(--lanterne); }
.rangee-ev .pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rangee-ev .prix { font-size: 1.25rem; font-weight: 700; }
@media (max-width: 820px) {
  .rangee-ev, .rangee-ev:nth-child(even) { grid-template-columns: 1fr; padding: 26px 0; }
  .rangee-ev:nth-child(even) .visuel { order: 0; }
}
.nuit .pastille { background: rgba(201,196,232,.14); color: var(--brume); backdrop-filter: blur(8px); }
.nuit .pastille.ok { background: rgba(16,20,43,.72); color: var(--ok); }
.nuit .pastille.alerte { background: rgba(16,20,43,.78); color: var(--alerte); }
.nuit .pastille.accent { background: rgba(16,20,43,.78); color: var(--lanterne-2); }

/* ═══ Déroulé (vraie séquence : réserver, recevoir, rejoindre) ═══ */
.deroule { max-width: 1240px; margin: 30px auto 0; padding: 60px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.deroule .photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4/5; background: var(--encre-2); }
.deroule .photo img { width: 100%; height: 100%; object-fit: cover; }
.deroule h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin: 0 0 26px; }
.etapes { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; gap: 26px; }
.etapes li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.etapes .rond { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--trait); color: var(--lanterne); }
.etapes .rond svg { width: 24px; height: 24px; }
.etapes h3 { font-size: 1.25rem; margin: 4px 0 4px; }
.etapes p { color: var(--brume); margin: 0; }
@media (max-width: 820px) { .deroule { grid-template-columns: 1fr; } .deroule .photo { aspect-ratio: 16/10; } }

.pied-site { max-width: 1240px; margin: 40px auto 0; padding: 28px 24px 40px; border-top: 1px solid var(--trait); color: var(--brume-2); font-size: .88rem; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.pied-site a { color: var(--brume); }

/* ═══ Fiche événement ═══ */
.couverture { position: relative; height: min(62vh, 560px); margin-top: -72px; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; }
.couverture .photo { position: absolute; inset: -8% 0 0; z-index: -2; }
.couverture .photo img { width: 100%; height: 100%; object-fit: cover; }
.couverture::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,20,43,.5), rgba(16,20,43,.15) 35%, rgba(16,20,43,.94) 92%, var(--encre)); }
.couverture .in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px 34px; }
.couverture h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: .98; margin: 0 0 10px; max-width: 18ch; }
.couverture .sous { color: var(--brume); font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 0 0 16px; }
.couverture .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.couverture .meta .pastille { padding: 6px 12px; font-size: .86rem; }
.page-ev { max-width: 1240px; margin: 0 auto; padding: 24px 24px 60px; }
.page-ev .fiche { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; margin-top: 10px; }
@media (max-width: 960px) { .page-ev .fiche { grid-template-columns: 1fr; } }
.page-ev .fiche > * { min-width: 0; }   /* la bande des jours défile au lieu d'élargir la page */
.bloc { padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid var(--trait); }
.bloc:last-child { border-bottom: 0; }
.bloc h2 { font-size: 1.4rem; margin: 0 0 10px; }
.bloc .texte-long { color: #e7e2f3; max-width: 64ch; }
.nuit .resa { background: var(--verre); border: 1px solid var(--trait); border-radius: 26px; padding: 24px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.35); top: 90px; }
.nuit .etape-titre { font-size: 1.1rem; font-weight: 700; margin: 22px 0 10px; }
.nuit .etape-titre:first-child { margin-top: 0; }
.nuit .etape-titre i { background: var(--lanterne); color: #1c1305; }
.jours { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin: 0 -2px 4px; scrollbar-width: thin; scrollbar-color: var(--trait) transparent; }
.jr { flex: none; scroll-snap-align: start; width: 64px; padding: 8px 0 7px; border-radius: 14px; border: 1.5px solid var(--trait); background: rgba(201,196,232,.06); color: var(--lait); font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 0; transition: border-color .2s, background .2s; }
.jr small { font-size: .74rem; color: var(--brume-2); line-height: 1.2; }
.jr b { font-size: 1.35rem; line-height: 1.1; }
.jr:hover { border-color: var(--brume); }
.jr.on { background: var(--lanterne); border-color: var(--lanterne); color: #1c1305; }
.jr.on small { color: #4a3209; }
.jr.complet:not(.on) { opacity: .45; }
.jour-titre { color: var(--brume); font-weight: 600; margin: 6px 0 8px; }
.nuit .jour h3 { font-size: .98rem; color: var(--brume); font-weight: 600; }
.nuit .cr { position: relative; background: rgba(201,196,232,.06); border: 1.5px solid var(--trait); color: var(--lait); border-radius: 14px; min-width: 98px; transition: border-color .2s, background .2s; }
.nuit .cr:hover:not(:disabled) { border-color: var(--brume); }
.nuit .cr small { color: var(--brume-2); }
.nuit .cr.peu small { color: var(--lanterne-2); }
.nuit .cr.on { background: var(--accent-clair); border-color: var(--lanterne); box-shadow: none; }
.nuit .cr.on b { color: var(--lanterne-2); }
.nuit .tarif { border-color: var(--trait); }
.nuit .tarif .nom small { color: var(--brume-2); }
.nuit .compteur button { background: transparent; color: var(--lait); border-color: var(--trait); display: grid; place-items: center; }
.nuit .compteur button svg { width: 18px; height: 18px; }
.nuit .compteur button:hover { border-color: var(--lanterne); color: var(--lanterne); }
.nuit .compteur output { display: inline-block; }
.nuit .total { border-top: 1.5px solid var(--brume); font-size: 1.25rem; }
.nuit input, .nuit select, .nuit textarea { background: rgba(16,20,43,.55); border-color: var(--trait); color: var(--lait); }
.nuit input::placeholder { color: var(--brume-2); }
.nuit input:focus { outline-color: var(--lanterne); }
.nuit label { color: var(--brume); font-weight: 600; }
.nuit .case span { color: var(--brume); font-weight: 500; }
.nuit .alerte { background: var(--alerte-clair); color: var(--alerte); }
.nuit .succes { background: var(--ok-clair); color: var(--ok); display: flex; gap: 10px; align-items: center; }
.nuit .info { background: var(--info-clair); color: var(--brume); display: flex; gap: 10px; align-items: flex-start; }
.nuit .info .ic, .nuit .succes .ic { margin-top: .2em; }
.nuit dialog { background: var(--encre-2); color: var(--lait); }
.securite { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--brume-2); font-size: .86rem; margin: 12px 0 0; }

/* ═══ Billets ═══ */
.page-billet { max-width: 980px; margin: 0 auto; padding: 30px 24px 70px; }
.page-billet h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; margin: 0 0 10px; }
.page-billet .quand { font-size: 1.2rem; color: var(--brume); margin: 0 0 24px; }
.panneau { background: var(--encre-2); border: 1px solid var(--trait); border-radius: 24px; padding: 24px; margin: 0 0 30px; }
.panneau .ligne-info { display: flex; gap: 10px; align-items: center; color: var(--brume); margin: 0 0 10px; }
.panneau .ligne-info .ic { color: var(--lanterne); }
.rejoindre { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; font-size: 1.15rem; padding: 18px 24px; margin: 8px 0 10px; }
.rejoindre svg { width: 26px; height: 26px; }
.nuit .billets { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.nuit .billet { position: relative; background: var(--lait); color: #191a2e; border: 0; border-radius: 20px; padding: 20px 20px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); text-align: center; overflow: hidden; }
.nuit .billet::before, .nuit .billet::after { content: ""; position: absolute; top: 62px; width: 26px; height: 26px; border-radius: 50%; background: var(--encre); }
.nuit .billet::before { left: -13px; } .nuit .billet::after { right: -13px; }
.nuit .billet .haut { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px dashed #cfc8db; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-align: left; }
.nuit .billet .haut b { font-size: 1.15rem; }
.nuit .billet .haut small { color: #6e6888; }
.nuit .billet .qr { width: 200px; margin: 4px auto 8px; }
.nuit .billet .bas { color: #6e6888; font-size: .85rem; }
.nuit .billet.pointe { opacity: .55; }
@media print { body.nuit { background: #fff; color: #000; } .nuit .entete, .noprint { display: none !important; } .nuit .billet { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } .nuit .billet::before, .nuit .billet::after { display: none; } }

/* Chargement */
.chargement { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--brume-2); padding: 60px 0; }
.chargement i { width: 8px; height: 8px; border-radius: 50%; background: var(--lanterne); animation: pulse 1.2s infinite ease-in-out; }
.chargement i:nth-child(2) { animation-delay: .15s; } .chargement i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 80%, 100% { opacity: .2; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .chargement i { animation: none; opacity: .7; } .rangee-ev .visuel img { transition: none; } }

/* ═══ Grain de film sur toutes les pages sombres ═══ */
body.nuit::after { content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { body.nuit::after { animation: none; } }
@media print { body.nuit::after { display: none; } }
.scene .photo video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; }
.scene .photo video.pret { opacity: 1; }

/* ═══ Extrait sonore : l'onde réagit au son ═══ */
.ecoute { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; border-radius: 26px; margin: 0 0 30px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(244,165,58,.16), transparent 55%), var(--encre-2); border: 1px solid var(--trait); overflow: hidden; }
.ecoute .lire { width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--lanterne); color: #1c1305; display: grid; place-items: center; cursor: pointer; position: relative; }
.ecoute .lire svg { width: 26px; height: 26px; }
.ecoute .lire::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(244,165,58,.45); opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; }
.ecoute.joue .lire::before { opacity: 1; transform: scale(1); animation: halo 1.6s ease-out infinite; }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.ecoute h2 { font-size: 1.25rem; margin: 0 0 2px; }
.ecoute p { margin: 0; color: var(--brume); font-size: .95rem; }
.ecoute canvas { grid-column: 1 / -1; width: 100%; height: 86px; display: block; }
.ecoute .temps { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--brume-2); font-size: .82rem; font-variant-numeric: tabular-nums; margin-top: -6px; }
.ecoute .barre { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--trait); cursor: pointer; margin-top: -4px; }
.ecoute .barre i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--lanterne); }

/* ═══ Ce qui t'attend ═══ */
.attend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 20px; overflow: hidden; margin: 0 0 30px; }
.attend div { background: var(--encre); padding: 16px 18px; display: grid; gap: 4px; }
.attend .ic { width: 22px; height: 22px; color: var(--lanterne); }
.attend b { font-size: 1.15rem; line-height: 1.2; }
.attend span { color: var(--brume-2); font-size: .86rem; }

/* ═══ Plan du parcours ═══ */
.plan { position: relative; border-radius: 22px; border: 1px solid var(--trait); overflow: hidden; aspect-ratio: 16/10;
  background: radial-gradient(70% 80% at 50% 45%, rgba(201,196,232,.08), transparent 70%), repeating-linear-gradient(0deg, transparent 0 39px, rgba(201,196,232,.05) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(201,196,232,.05) 39px 40px), var(--encre-2); }
.plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan .chemin { fill: none; stroke: var(--lanterne); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(244,165,58,.6)); }
.plan .ombre { fill: none; stroke: rgba(201,196,232,.18); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.plan .depart { fill: var(--lanterne); } .plan .arrivee { fill: none; stroke: var(--lait); stroke-width: 2.5; }
.plan .legende { position: absolute; left: 16px; bottom: 14px; color: var(--brume); font-size: .86rem; display: flex; gap: 14px; flex-wrap: wrap; }
.plan .legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lanterne); margin-right: 6px; vertical-align: 0; }
.plan .legende i.fin { background: transparent; border: 2px solid var(--lait); }

/* ═══ Galerie ═══ */
.galerie { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--trait) transparent; }
.galerie button { flex: none; width: min(78%, 360px); aspect-ratio: 4/3; border: 0; padding: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; scroll-snap-align: start; background: var(--encre-2); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.galerie button:hover img { transform: scale(1.05); }
dialog.visionneuse { padding: 0; background: transparent; max-width: min(1100px, 94vw); width: auto; box-shadow: none; }
dialog.visionneuse img { max-height: 86vh; border-radius: 16px; }
dialog.visionneuse button { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(16,20,43,.8); color: #fff; display: grid; place-items: center; cursor: pointer; }

/* ═══ Questions fréquentes ═══ */
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; color: var(--lanterne); transition: transform .3s; flex: none; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .rep { color: var(--brume); padding: 0 0 16px; white-space: pre-line; max-width: 64ch; }

/* ═══ Barre « Réserver » collée en bas (téléphone) ═══ */
.barre-resa { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 20px; border-radius: 999px; background: rgba(24,29,61,.86); border: 1px solid var(--trait); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0,0,0,.45);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.barre-resa.visible { transform: none; }
.barre-resa b { font-size: 1.05rem; } .barre-resa small { display: block; color: var(--brume-2); font-size: .78rem; }
@media (max-width: 960px) { .barre-resa { display: flex; } .page-ev { padding-bottom: 110px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Habillage « Sobre » : clair, net, sans décor. S'applique avec <body class="nuit sobre">.
   Mêmes composants que « nocturne » : seules les variables et quelques détails changent.
   La couleur du créateur remplace --lanterne (accent).
   ═══════════════════════════════════════════════════════════════════════════ */
body.nuit.sobre {
  --encre: #f5f6f8; --encre-2: #ffffff; --crepuscule: #e9ecf2; --brume: #394152; --brume-2: #667085;
  --lanterne: #2f5bea; --lanterne-2: #2447c4; --braise: #d92d20; --lait: #12161f;
  --trait: rgba(18,22,31,.11); --verre: rgba(255,255,255,.92);
  --accent: var(--lanterne); --accent-fonce: var(--lanterne-2); --accent-clair: color-mix(in srgb, var(--lanterne) 10%, var(--surface));
  --ok: #0f7a52; --ok-clair: #e3f4ec; --alerte: #b42318; --alerte-clair: #fdeceb; --info-clair: #eef2fb;
  --acc-ink: #fff; --surface: #fff; --surface-2: #e9ecf2; --veil: rgba(18,22,31,.06); --grid: rgba(18,22,31,.05); --champ: #fff; --champ-bord: #cfd5df; --disabled: #d5dae3;
  --ombre-1: 0 1px 2px rgba(16,24,40,.06), 0 14px 36px rgba(16,24,40,.09);
  font-size: 16px; color-scheme: light;
}
.sobre a { color: var(--lanterne-2); }
.sobre h1, .sobre h2, .sobre h3 { letter-spacing: -.025em; font-variation-settings: normal; }
.sobre .entete.plein { background: color-mix(in srgb, var(--encre) 86%, transparent); border-bottom: 1px solid var(--trait); }
.sobre .entete a.marque, .sobre .entete .droite a { color: var(--lait); }
.sobre .btn { background: var(--lanterne); color: var(--acc-ink); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.18); font-weight: 650; }
.sobre .btn:hover { background: var(--lanterne-2); }
.sobre .btn.second { background: var(--surface); color: var(--lait); border: 1px solid var(--trait); box-shadow: none; }
.sobre .btn.second:hover { border-color: var(--lanterne); background: var(--surface); }
.sobre .btn:disabled { background: var(--disabled); color: #fff; }
body.nuit.sobre::after { display: none; }                 /* pas de grain */

/* Accueil : ouverture claire, sans photo */
.sobre .scene { min-height: auto; margin-top: -72px; background: radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--lanterne) 11%, transparent), transparent 70%), var(--encre); }
.sobre .scene::before { display: none; }
.sobre .scene .in { padding: 150px 24px 40px; }
.sobre .scene h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 16ch; }
.sobre .scene .chapo { color: var(--brume); }
.sobre .onde { height: 70px; margin-top: 30px; }
.sobre .onde .o2 { stroke: var(--brume-2); opacity: .35; }

/* Agenda */
.sobre .rangee-ev { border-top-color: var(--trait); }
.sobre .rangee-ev .visuel { background: linear-gradient(135deg, color-mix(in srgb, var(--lanterne) 16%, var(--surface)), color-mix(in srgb, var(--lanterne) 4%, var(--surface))); border: 1px solid var(--trait); }
.sobre .rangee-ev .visuel img { filter: none; }
.sobre .pastille { background: var(--veil); color: var(--brume); backdrop-filter: none; }
.sobre .pastille.ok { background: var(--ok-clair); color: var(--ok); }
.sobre .pastille.alerte { background: var(--alerte-clair); color: var(--alerte); }
.sobre .pastille.accent { background: var(--accent-clair); color: var(--lanterne-2); }
.sobre .infos-ev .ic, .sobre .etapes .rond, .sobre .attend .ic, .sobre .faq summary svg, .sobre .panneau .ligne-info .ic { color: var(--lanterne); }
.sobre .etapes .rond { background: var(--surface); }
.sobre .deroule .photo { background: var(--surface-2); }

/* Fiche événement */
.sobre .couverture { height: auto; min-height: 340px; background: linear-gradient(135deg, color-mix(in srgb, var(--lanterne) 14%, var(--surface)), var(--encre)); }
.sobre .couverture::before { background: none; }
.sobre .couverture .photo img { opacity: 1; }
.sobre .couverture.avec-photo::before { background: linear-gradient(180deg, rgba(18,22,31,.35), rgba(18,22,31,.7)); }
.sobre .couverture.avec-photo h1, .sobre .couverture.avec-photo .sous { color: #fff; }
.sobre .couverture.avec-photo .pastille { background: rgba(255,255,255,.18); color: #fff; }
.sobre .couverture .in { padding: 110px 24px 30px; }
.sobre .bloc .texte-long { color: var(--brume); }
.sobre .resa { background: var(--verre); border: 1px solid var(--trait); box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 20px 50px rgba(16,24,40,.09); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sobre .etape-titre i { background: var(--lanterne); color: var(--acc-ink); }
.sobre .jr { background: var(--surface); }
.sobre .jr.on { background: var(--lanterne); border-color: var(--lanterne); color: var(--acc-ink); }
.sobre .jr.on small { color: rgba(255,255,255,.85); }
.sobre .cr { background: var(--surface); }
.sobre .cr.on { background: var(--accent-clair); border-color: var(--lanterne); }
.sobre .cr.on b { color: var(--lanterne-2); }
.sobre .cr.peu small { color: var(--lanterne-2); }
.sobre .compteur button { background: var(--surface); }
.sobre .total { border-top-color: var(--lait); }
.sobre input, .sobre select, .sobre textarea { background: var(--champ); border-color: var(--champ-bord); color: var(--lait); }
.sobre dialog { background: var(--surface); color: var(--lait); }
.sobre .plan { background: radial-gradient(70% 80% at 50% 45%, var(--veil), transparent 70%), repeating-linear-gradient(0deg, transparent 0 39px, var(--grid) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--grid) 39px 40px), var(--surface); }
.sobre .plan .chemin { filter: none; }
.sobre .plan .ombre { stroke: var(--trait); }
.sobre .plan .arrivee { stroke: var(--lait); }
.sobre .plan .legende i.fin { border-color: var(--lait); }
.sobre .ecoute { background: var(--surface); }
.sobre .ecoute .lire { background: var(--lanterne); color: var(--acc-ink); }
.sobre .ecoute .lire::before { border-color: color-mix(in srgb, var(--lanterne) 45%, transparent); }
.sobre .ecoute .barre i { background: var(--lanterne); }
.sobre .attend div { background: var(--surface); }
.sobre .galerie button { background: var(--surface-2); }
.sobre .barre-resa { background: var(--verre); box-shadow: 0 10px 34px rgba(16,24,40,.18); }

/* Billets */
.sobre .panneau { background: var(--surface); }
.sobre .billet { background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre-1); color: var(--lait); }
.sobre .billet::before, .sobre .billet::after { background: var(--encre); box-shadow: inset 0 0 0 1px var(--trait); }
.sobre .billet .haut { border-bottom-color: #cfd5df; }
.sobre .billet .haut small, .sobre .billet .bas { color: var(--brume-2); }
.sobre .chargement i { background: var(--lanterne); }
.sobre.photo-couv .entete:not(.plein) a, .sobre.photo-couv .entete:not(.plein) .droite a { color: #fff; }

/* ═══ Mode sombre : même habillage, palette inversée (<body class="nuit sobre sombre">) ═══ */
body.nuit.sobre.sombre {
  --encre: #0b0e14; --encre-2: #131824; --crepuscule: #1a2130; --brume: #b9c1d1; --brume-2: #8791a8;
  --lanterne: #cfd4dc; --lanterne-2: #e6e9ef; --lait: #eef1f7;
  --trait: rgba(255,255,255,.10); --verre: rgba(19,24,36,.88);
  --ok: #cfd4dc; --ok-clair: rgba(255,255,255,.08); --alerte: #e6e9ef; --alerte-clair: rgba(255,255,255,.08); --info-clair: rgba(255,255,255,.06);
  --acc-ink: #0b0e14; --surface: #131824; --surface-2: #1a2130; --veil: rgba(255,255,255,.07); --grid: rgba(255,255,255,.05);
  --champ: rgba(255,255,255,.05); --champ-bord: rgba(255,255,255,.16); --disabled: #262e40;
  --ombre-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px rgba(0,0,0,.45);
  color-scheme: dark;
}
.sombre .scene { background: radial-gradient(60% 70% at 85% 8%, color-mix(in srgb, var(--lanterne) 20%, transparent), transparent 70%), var(--encre); }
.sombre .btn { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.sombre .btn:disabled { color: #6f7a90; }
.sombre .resa { box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sombre .bloc .texte-long { color: #cfd5e3; }
.sombre .jr.on small { color: rgba(11,14,20,.75); }
.sombre .billet { background: var(--lait); color: #12161f; border: 0; }
.sombre .billet .haut small, .sombre .billet .bas { color: #667085; }
.sombre .billet .haut { border-bottom-color: #cfd5df; }
.sombre .billet::before, .sombre .billet::after { background: var(--encre); box-shadow: none; }
.sombre input::placeholder { color: var(--brume-2); }
.sombre .entete.plein { border-bottom-color: var(--trait); }
@media print { body.nuit.sobre.sombre { background: #fff; color: #000; } }